CSS methods

The CSS properties can be written either in the style attribute of a tag or in the <style> element.

There are three methods to apply CSS properties to an element.

inline CSS
internal CSS
external CSS

1. inline CSS

In this method, style attribute is used in the starting tag of the element that we want to style. The syntax of inline CSS has been given below.

Example

<E style="property-name:property-value;"></E>
<div style="width:400px; height:400px; background-color:lightblue;"></div>

Try </>

In the above example, style attribute contains the CSS properties. One property includes the property-name and property-value. For example, width is the property-name and 400px is the property-value (width:400px;).

2. internal CSS

In this method, CSS properties are specified in the <style> tag. And the <style> must be present in the <head> tag. See the syntax given below for the internal CSS properties.

Example

<head>
<style>
div{
 width:400px;
 height:400px;
 background-color:lightblue;
}
 </style>
</head>

Try </>

The above given inline and internal methods apply the same CSS properties.

3. external CSS

In this method, a separate file of CSS is used to style the content. To make a css file

Copy the above given code and paste it in the notepad. Now, save the file with the name external.css.
Remember that you can give any name to the file but the extension must be .css.
And now connect CSS file with the HTML using <style> tag. And in this case, <style> tag may be placed inside the head or body sections.

The syntax to import a CSS file is given below.

Example

<head>
<link href="external.css" rel="stylesheet">
</head>

Try </>

rel means relation. And the value of rel is stylesheet because external.css is a style sheet.

Next Previous