The CSS Cascade

We learnt in the last article that specificity is one of the mechanism that is used by the browser to resolve conflicts in CSS rules. The other mechanism used by the browser is the 'C' in CSS, The Cascade.

Unlike specificity that deals with CSS rules, The Cascade can also apply within a CSS rule. Within a CSS rule? Read on.

I concluded the last post on CSS Specificity with a question and the question will be our starting point in explaining The CSS Cascade.

If you've been following this series, at this point I'll assume that you will create an HTML file and CSS file to follow along with the code snippets in this post and you are feeling comfortable with the Browser Developer Tools.

Let's have the question again: Given the following HTML and CSS rules, which rule will the browser use to style the HTML?

<div>
  <p class="p1 p2 p3">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, aliqua.</p>
</div>

/* Option 1*/
div p.p1 {
  font-size: 120px;
  color: red;
}

/* Option 2*/
div p.p1 {
  font-size: 50px;
  color: orange;
}

The answer is Option 2 . Why? Let's find out.

From the Mozilla Developer Network:

Stylesheets cascade — at a very simple level this means that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

I have underlined some point of interest which i think will be enough to understand this concept of "Cascade in CSS". Taking a second look at our CSS rule, they both have the same specificity of 0, 0 , 1 , 2 or 0, 1, 2 if you omit the first number which belongs to the style attribute.

How did we arrive at this value? Check the post on CSS Specificity. You can also copy and paste the code into CSS Specificity Calculator by Keegan Street.

Since both CSS rules have the same specificity, the one that comes last will be used, hence Option 2.

In the Second paragraph of this post, i mentioned that the CSS Cascade also applies inside CSS rules. This means, that if you have conflicting property declarations, the one that comes last will be used. Let's take an example.

Update your CSS file with the snippet below:

div p.p1 {
  font-size: 50px;
  font-size: 20px;
  font-weight: bold;
  color: orange;
}

In the code snippet above, we declared the font-size property twice. First with a value of 50px and then 20px, but the browser will use the 20px value because it comes last. And if you use "Inspect Element" on the paragraph you will notice the browser is making use of the 20px font-size and the other font-size declaration is gladly ruled out.

This cascading effect inside CSS rules is not only applicable to the font-size property. If you have any property declaration that conflict in a CSS rule, the browser will use the last one. Let's take some examples.

p {
  margin-left: 1em;
  margin-left: 2em; /* The browser will use this declaration*/
}

p {
  font-family: "Trebuchet Ms", Verdana;
  font-family: "Times New Roman", Georgia; /* The browser will use this declaration */
  font-size: 50px;
}

p {
  color: orange;
  color: red; /* The browser will use this value */
}

If you like analogies, head over to Quora and read the answer to the question What is Cascading in CSS.

Once you feel comfortable with The Cascade, Read Introducing the Cascade on the Mozilla Developer Network.

Next, CSS Inheritance.