Previous Up Index Next

Cascading Style Sheets


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:

  1. 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 on the root element and for properties that do not inherit), the initial value is used.
  2. Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
  3. Sort by origin: the author's style sheets override the reader's style sheets, which override the default values.
  4. 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 are:
      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 */ 
    
  5. Sort by order specified: if two rules have the same weight, the latter specified should live.

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.
Previous Up Index Next

© 1996 Microsoft Corporation