CSS Cascade

Inheritance

Things like color, cursor, font properties, letter-spacing, line-height, list-style, text-align, text-indent, and visibility are inherited from the parent element. For example, if the font-size for a <p> is 12px and there is an <a> link in that paragraph, then it also will appear as 12px. Things like border, padding, margin, and a whole lot more, are not inherited.

Cascade

The following text is from the W3C specification. The first line must be read slowly because it is the key to understanding how the page is styled. As we write CSS, we are specifying a Selector and then Property/Value pairs. The browser, however, applies Values to an element identified in the Selector.

To find the value for an element/property combination, user agents must apply the following sorting order:

  1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
  2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
    1. user agent declarations
    2. user normal declarations
    3. author normal declarations
    4. author important declarations
    5. user important declarations
  3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu.

While the W3C description is certainly accurate, it takes a lot of brain power to digest and remember it all. A practical summary reads more like (in descending order of importance):

  1. !important values trump everything.
  2. style attribute rules (<element style="...">)
  3. id (#) selectors
  4. class (.) selectors
  5. standard tag (element) selectors
  6. If there is still a tie, then the rule that appears last (i.e. closest to the target element) wins.

The above list is an over-simplification and it is not entirely correct. For more information, check out the specification.

Specificity

Each CSS property is given a specificity (how powerful the value is) when the browser styles the web page. There are four "levels" of power when determining the final specificity. Think of it like magic levels.

  1. Style attributes (e.g. <p style="color:red">) is Dumbledore.
  2. Id selectors (e.g. #unique { color:red; } ) are experienced wizards.
  3. Class selectors (e.g. .special { color:red; } ) are Howarts students.
  4. Standard tag selectors (e.g. p { color:red; } ) are muggles.

Let’s look at some examples:

In this example there are three tag selectors (muggles), namely div, article, and p. There is one class selector (Hogwarts students), no id’s, and no style attributes. This is often expressed in the format [0,0,1,3]. 
div article p.bookTitle {
    font-weight:normal;
}
The specificity in this case is one id (wizard). [0,1,0,0] 
#bookOne {
    font-weight:bold;
}

 

Let’s say our HTML is:

<div>
  <article>
    <p id="bookOne" class="bookTitle">Harry Potter and the Sorcerer's Apprentice</p>
  </article>
</div>

We have a conflict for font-weight properties. On one hand, because the paragraph is a decendent of an article and div, and it has the class bookTitle, it should have a font-weight of normal. On the other hand, the paragraph also has an id of bookOne that gets the bold value. In this case, one experienced wizard is stronger than any number of Hogwarts students and muggles combined.