Style Sheets Guide
=The Cascade=

= Index DOT Css by Brian Wilson =

  Main Index | Property Index | CSS Support History | Browser History  

Introduction to the Cascade
Multiple Sources
The most common scenario authors will be concerned with are the style rules which are declared by the author, but a style sheet may originate from several different sources: Multiple Methods
In addition, style sheet rules may be specified using several different methods, any of which are legal: When more than one style rule is specified for a single CSS selector or element, using any of these sources or methods, and they are in direct conflict with one another, what should happen? When all is said and done, CSS generates a single, cohesive "virtual" style sheet using all the style rules (explicitly stated or not) from all of these disparate sources; CSS "cascades" (combines) all of them together. When conflicts arise between style rules, resolution is determined using a weighted scale. Each style rule will carry a specific weight on this scale; when two or more rules are in conflict, the rule with the highest weight will "win" and be rendered.

Basic Cascading Order
The chart below is only a brief reference to resolving style conflicts, and it ignores many of the more complex cascading rules (for a more complete cascading guide, please see the next section.) If multiple style rules are in conflict for a given selector, the scales shown below can help determine which of these style rules will be used. A style rule with higher importance will win over an identical style rule with lower importance.

<================> Highest

Style Sheet
Style Sheet

Style Sheet
Style Sheet


Complete Cascade Calculations
The following rules are used to determine which style rules will apply to a selector, given that it has more than one style in contention for that selector.
Step 1:
Gather all rules that apply to the selector
Find all the style declarations that implicitly or explicitly apply to the element or selector in question for the desired Media Type.
Step 2:
Sort by origin and importance
This is the primary Cascade sorting method. Style rules occurring in the browser default style sheet have the lowest precedence. Reader style sheets take precedence over browser style sheets, and Author style sheets take precendence over both of these.
[Note: Imported style sheets have the same origin level as the style sheet that imported it.]

Using a special flag in a style rule, precendence of equivalent style rules can be reversed in the Author and Reader realms. The special keyword "!important" is added after the style declaration to signify that greater precendence should be given to a particular style rule. "!important" declarations override equal style rules that do not use the "!important" keyword, and when both Reader and Author style sheets specify the "!important" flag, the Reader's style rule will override the Author's - this is to allow the Reader the greater degree of rendering control, if necessary.
Step 3:
Sort by specificity of the CSS selector
More specific CSS selectors will override more general ones. To determine the "specificity" of a CSS selector, use the following steps:
  1. Count the number if ID attributes in the selector
  2. Count the number of attributes and pseudo-classes in the selector.
  3. Count the number of element names in the selector
Now concatenate these three numbers together (CSS2 says "in a number system with a large base") to find the exact specificity of the selector. The selector with the highest specificity number will be used.
Comparing the specificities of "h2 em { color: green }" and "h2 em#foo { color: red }":
     Specificity of "h2 em { color: green }" = 0-0-2 (or "2")
     Specificity of "h2 em#foo { color: red }" = 1-0-2 (or "102")
in other words, "h2 em#foo { color: red }" has a higher specificity and would win this Cascade calculation.
Step 4:
Sort by order specified
If two or more style rules have the same importance, origin and specificity, The rule that is specified last wins.

Boring Copyright Stuff....