Chapter 8
Multiple Style Sheets
If
some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And
an internal style sheet has these properties for the h3 selector:{
color:red;
text-align:left;
font-size:8pt;
}
h3
{
text-align:right;
font-size:20pt;
}
If
the page with the internal style sheet also links to the external style sheet
the properties for h3 will be:{
text-align:right;
font-size:20pt;
}
color:red;
text-align:right;
font-size:20pt;
The
color is inherited from the external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.text-align:right;
font-size:20pt;
Multiple Styles Will Cascade into One
Styles
can be specified:- inside an HTML
element
- inside the head
section of an HTML page
- in an external
CSS file
Cascading order
What
style will be used when there is more than one style specified for an HTML
element?Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1.
Browser default
2.
External style sheet
3.
Internal style sheet (in the head section)
4.
Inline style (inside an HTML element)
So,
an inline style (inside an HTML element) has the highest priority, which means
that it will override a style defined inside the <head> tag, or in an
external style sheet, or in a browser (a default value).
No comments:
Post a Comment