Learn What the Cascade in Cascading Style Sheets Means

CSS Short Course

cascading waterfall
 Busakorn Pongparnit/Getty Images

The cascade is what makes CSS style sheets so useful. In short, the cascade defines the order of precedence for how conflicting styles should be applied. In other words, if you have two styles:

p { color: red; }
p { color: blue; }

The cascade determines which color the paragraphs should be, even though the style sheet states that they should be both red and blue. Ultimately only one color can be applied to paragraphs, so there has to be an order. And this order is applied by which selectors (the p in the above example) have the highest precedence and which order they appear in the document.

The following list is a simplification of how your browser decides precedence for a style:

  1. Look in the style sheet for a selector matching the element. If there are no defined styles, then use the default rules in the browser
  2. Look in the style sheet for selectors marked !important and apply those to the appropriate elements.
  3. All styles in the style sheet will override default browser styles (except in the case of user style sheets).
  4. The more specific the style selector, the higher the precedence it will have. For example, div > p.class is more specific than p.class which is more specific than p.
  5. Finally, if two rules apply to the same element and have the same selector precedence, the one that was loaded last will be applied. In other words, the style sheet is read from top to bottom, and styles are applied on top of one another.

Based on those rules, in the above example, paragraphs would be written in blue, because p { color: blue; } comes last in the style sheet.

This is a very simplified explanation of the cascade. If you are interested in learning more about how the cascade works, you should read What does “Cascade” mean in Cascading Style Sheets?.