CSS Cascade

If two CSS declarations affect the same element but they conflict, which one wins?

CSS:

body {
  background: rebeccapurple;
}

body {
  background: grey;
}

The cascade algorithm uses the following to decide which rules are applied when there's a conflict:

1. Source origin
2. Selector specificity
3. Order of appearance

Source Origin

In decreasing order of importance:

1. Inline style attribute

   <p style="color: grey;"></p>
   

2. Embedded <style> element

   <style>
     p {
       background: rebeccapurple;
     }
   </style>

3. External stylesheet

   
   <link rel="stylesheet" href="styles.css">    
   

Selector Specificity

In decreasing order of selector importance:

1. ID Selector
2. Classes, attributes and pseudo-classes
3. Elements and pseudo-elements

See the Specificity Calculator

Source order

When there's still a tie, the declaration that comes last in source order, wins.

Inspecting the Cascade

When in doubt, inspect!

The Inspector will order all declarations from highest to lowest precedence.

Further Learning

• CSS Cascade, specificity, and inheritance
• Video: Why is CSS so Weird? by Miriam Suzanne
• Video: Inspecting the CSS Cascade using Firefox DevTools