DM 171: Tutorials: CSS Cascade and Specificity

CSS Cascade and Specificity

As your style sheet schemes become more complex (and associated lines of code increase), you may find your rules working at cross purposes and giving you unexpected results. A better understanding of the way the browser assigns styles, the CSS cascade, and style specificity will help you troubleshoot these problems as well as set up your styles in a logical manner in the first place.

Browser Behavior

Browsers check through available style sheets in this order.

  1. Built-in browser style sheet - The default style sheet that your browser uses when there are no other sources available.
  2. Browser user style sheet - Styles that the browser owner sets up in their preferences. Use ems when specifying text sizes to allow the user's style sheet to come into play automatically.
  3. Web author style sheet - The external style sheet that you, the designer, attaches to your HTML files.
  4. Web author embedded styles - The internal style sheet that you write into your HTML file.
  5. Web author inline styles - The local styles applied by you using the style attribute in an HTML tag.

Specificity

The specificity of a CSS rule can be represented by three intergers separated by dashes. The values of the intergers are ordered this way: (number of IDs in the selector) - (number of classes in the selector) - (number of element names in the selector). Here are a few examples.

Rule Specificity Examples
# of
IDs
- # of
Classes
- # of
Elements
Rule Examples in Ascending Specificity
0 - 0 - 1 p {color:blue;} Only one HTML element in this example.
0 - 0 - 2 body p {color:green;} Two HTML elements.
0 - 1 - 0 .red {color:red;} One class.
0 - 1 - 1 p.red {color:red;} One class and one element.
1 - 0 - 0 #purple {color:purple;} One ID.
1 - 0 - 1 p#purple {color:purple;} One ID and one element.
1 - 1 - 1 p#purple .bold {color:purple; font-weight:bold;} One ID, one class, and one element.
2 - 1 - 4 html body div#wrapper #footer p.subtle {font: 0.7em gray sans-serif;}

The “bigger” the number, the more specificity a rule has. When two (or more) rules conflict in an element, higher specificity wins out.

Cascade Shakedown

So how does this all work? Something like this…

  1. As the browser renders (builds) the page, it checks each style sheet in the order listed above for rules affecting each element it encounters. In general, the last rule encountered for an element is the rule followed. A local/inline style trumps an internal/embedded style trumps a style in an external style sheet trumps the user's styles (in their preferences) trumps the built-in/default style of the browser. However…
  2. A more specific style trumps order of rule. A very specific rule will take precedence over a more generic rule further down the style order.
  3. Adding “ !important” after a definition value but before the semicolon separator (the space between the value and the exclaimation point is required) takes it out of the cascade order and makes it take precedence.
    p {color: red !important;} is an example.
  4. When everything else is equal, the last definition takes precedence.

When all else fails, experiment!