![]() |
![]() |
![]() |
![]() |
Using cascading style sheets, more than one style sheet can influence the presentation simultaneously. There are two main reasons for this feature: modularity and author/reader balance.
A style sheet designer can combine several (partial) style sheets to reduce redundancy:
@import url(http://www.style.org/stylea); @import url(http://www.style.org/styleb); H1 { color: red } /* override imported sheets */
Also, both readers and authors can influence the presentation through style sheets. To do so, they use the same style sheet language, thus reflecting a fundamental feature of the Web: everyone can become a publisher.
Sometimes conflicts will arise between the style sheets that influence the presentation. Conflict resolution is based on each style rule having a weight. By default, the weights of the reader's rules are less than the weights of rules in the author's documents, but style sheet designers can increase the weights of their rules by using the keyword "important". In this example, the H1 and P styles will override all other style sheet formatting:
H1 { color: red ! important } P { font-size: 12pt ! important }
A reader rule labeled important will override an author rule with normal weight. An author rule labeled important will override an important reader rule.
Cascading Order
Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm should be followed:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.
This strategy gives authors' style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, for example through a pull-down menu.
![]() |
![]() |
![]() |
![]() |