There are mainly 3 ways to insert CSS in any webpage -
When the same style need to be applied to many pages of a website then we prefer to use the external style sheet. Using of External style sheet allows to change the look of an entire website by changing this one file only. The < link > element is used in the < head > section of HTML document to include an external style sheet (separate text file with .css extension).
The style attribute is used to define any inline styles of any HTML element. The style attribute can contain any CSS property but applicable to that element only.
< p style = "color:blue;" > My first paragraph.< /p >
To apply CSS mainly on a single or specific document having a unique style. The HTML element < style > is used in the < head > section of HTML document to define any internal style sheet.
In any HTML document multiple style sheet can be used. If some properties have already been defined for the same selector in the different style sheets, the values will be inherited from the more specific style sheet.
The following rule will define that what style will be used when there is more than one style specified for an HTML element -
CSS Programing
External Style Sheet
When the same style need to be applied to many pages of a website then we prefer to use the external style sheet. Using of External style sheet allows to change the look of an entire website by changing this one file only. The < link > element is used in the < head > section of HTML document to include an external style sheet (separate text file with .css extension).
< head > < link rel=" stylesheet " type = "text/css" href = "example.css" > < /head >
Inline style
The style attribute is used to define any inline styles of any HTML element. The style attribute can contain any CSS property but applicable to that element only.
< p style = "color:blue;" > My first paragraph.< /p >
Internal style sheet
To apply CSS mainly on a single or specific document having a unique style. The HTML element < style > is used in the < head > section of HTML document to define any internal style sheet.
< head >
< style >
h1
{
color: blue;
text-align: left;
}
< /style >
< /head >
Multiple Style Sheets
In any HTML document multiple style sheet can be used. If some properties have already been defined for the same selector in the different style sheets, the values will be inherited from the more specific style sheet.
The following rule will define that what style will be used when there is more than one style specified for an HTML element -
- Browser default (Lowest Priority)
- External style sheet
- Internal style sheet (in the head section)
- Inline style (Highest Prioprity)