The cascade
The cascade
In CSS, more than one style sheet can influence the presentation
simultaneously. There are two main reasons for this feature: modularity and
author/reader balance.
modularity
A style sheet
designer can combine several (partial) style sheets to reduce redundancy:
@import
url(http://www.style.org/pastoral);
@import
url(http://www.style.org/marine);
H1
{ color: red } /* override imported sheets */
author/reader balance
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. The UA is free to choose the mechanism for
referencing personal style sheets.
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. I.e., if there are conflicts between the style sheets
of an incoming document and the reader's personal sheets, the author's rules
will be used. Both reader and author rules override the UA's default values.
The imported style sheets also cascade with each other, in the order they
are imported, according to the cascading rules defined below. Any rules
specified in the style sheet itself override rules in imported style sheets.
That is, imported style sheets are lower in the cascading order than rules in
the style sheet itself. Imported style sheets can themselves import and override
other style sheets, recursively.
In CSS1, all '@import' statements must occur at the start of a style sheet,
before any declarations. This makes it easy to see that rules in the style sheet
itself override rules in the imported style sheets.
'important'
Style sheet designers can increase the weights of their declarations:
H1 { color: black ! important; background:
white ! important }
P { font-size: 12pt ! important; font-style:
italic }
In the example above, the first three declarations have increased weight,
while the last declaration has normal weight.
A reader rule with an important declaration will override an author rule
with a normal declaration. An author rule with an important declaration will
override a reader rule with an important declaration.
Cascading order
Conflicting rules are intrinsic to the CSS mechanism. To find the value for
an element/property combination, the following algorithm must be followed:
- Find all declarations that apply to the element/property in question.
Declarations apply if the selector matches the element in question. If no
declarations apply, the inherited value is used. If there is no inherited value
(this is the case for the 'HTML' element and for properties that do not
inherit), the initial value is used.
- Sort the declarations by explicit weight: declarations marked '!important'
carry more weight than unmarked (normal) declarations.
- Sort by origin: the author's style sheets override the reader's style sheet
which override the UA's default values. An imported style sheet has the same
origin as the style sheet from which it is imported.
- Sort by specificity of selector: more specific selectors will override more
general ones. To find the specificity, count the number of ID attributes in the
selector (a), the number of CLASS attributes in the selector (b), and the number
of tag names in the selector (c). Concatenating the three numbers (in a number
system with a large base) gives the specificity. Some examples:
- 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 */
Pseudo-elements
and pseudo-classes are counted as normal elements and classes, respectively.
- Sort by order specified: if two rules have the same weight, the latter
specified wins. Rules in imported style sheets are considered to be before any
rules in the style sheet itself.
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 author's 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, e.g. through a pull-down
menu.
A declaration in the 'STYLE' attribute of an element has the same weight as
a declaration with an ID-based selector that is specified at the end of the
style sheet:
<STYLE
TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color:
red">
In the above example, the color of the 'P' element would be red. Although
the specificity is the same for both declarations, the declaration in the
'STYLE' attribute will override the one in the 'STYLE' element because of
cascading rule number 5.
The UA may choose to honor other stylistic HTML attributes, for example
'ALIGN'. If so, these attributes are translated to the corresponding CSS rules
with specificity equal to 1. The rules are assumed to be at the start of the
author style sheet and may be overridden by subsequent style sheet rules. In a
transition phase, this policy will make it easier for stylistic attributes to
coexist with style sheets.
|
