7 Cascade

In CSS, more than one style sheet can simultaneously influence a the presentation of a document and rules from these style sheets may overlap in scope (e.g., two rules that apply to the same element specify a font size). CSS resolves these conflicts by assigning a weight to each style rule and when several rules apply, choosing the one with the greatest weight. This is known as the cascade .

By default, rules in a user's personal style sheets have less weight than rules in the author's documents. Thus, 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 style sheet.

Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.

7.1 Cascading order

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, user agents must apply the following algorithm:

1. Find all declarations that apply to the element/property in question. Declarations apply if the associated selector matches the element in question. If no declarations apply, terminate the algorithm.
2. Sort the declarations by explicit weight: declarations marked '!important'  carry more weight than unmarked (normal) declarations. See the section on 'important' rules for more information.
3. 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.
4. Sort by specificity of selector: more specific selectors will override more general ones. The definition and calculation of specificity is object-language dependent. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
5. 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 must be terminated when any of the above steps yields a rule that has a higher weight than the other rules that apply to the same element/property combination.

If the cascade does not yield a value, the user agent must seek an inherited value, and if no value inherits, the user agent must assign the initial value. (See the CSS2 processing model for more general information.)

This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the User agent gives the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

7.1.1 'Important' rules

Style sheet designers can increase the weights of their declarations by declaring them 'important' .

  H1 { color: black ! important; background: white ! important }
  P  { font-size: 12pt ! important; font-variant: 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.

Declaring a shorthand property (e.g., 'background') to be important is equivalent to declaring all of its sub-properties important.

7.1.2 Cascading order in HTML

• (a) count the number of "id" attributes in the selector
• (b) count the number of other attributes in the selector (including class attributes)
• (c) count the number of element names in the selector

Concatenating the three numbers (in a number system with a large base) gives the specificity.

  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 */
  /H1 [REL=up]/ {...}  /* a=0 b=1 c=1 -> specificity =  11 */
  UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */ 
  LI.red.level  {...}  /* a=0 b=2 c=1 -> specificity =  21 */
  #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */ 

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">

7.1.3 Precedence of non-CSS presentational hints

The UA may choose to honor presentational hints from other sources than style sheets, for example the FONT element or the "align" attribute in HTML. If so, the non-CSS presentational hints must be 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.