The CSS Cascade
Tags: css, beginners
Published: 2019-10-31 12:09:11

---
title: The CSS Cascade
published: true
description: Introduction to the "C" in CSS - The Cascade
tags: css, beginners
series: FrontEnd Development Zero to Hero
---

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](https://dev.to/ziizium/css-specificity-ilk) 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?

```html
<div>
  <p class="p1 p2 p3">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, aliqua.</p>
</div>
```
```css
/* 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]( https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance):

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

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](https://dev.to/ziizium/css-specificity-ilk). You can also copy and paste the code into [CSS Specificity Calculator](https://specificity.keegan.st/) by [Keegan Street](https://twitter.com/kstre).

![Calculating CSS Specificity with the CSS Specificity Calculator by Keegan Street](https://thepracticaldev.s3.amazonaws.com/i/r7577vxojmvbitu4buak.png)

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:

```css
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. 

![The Effect of CSS Cascade shown with the Browser Developer Tools in Firefox 70](https://thepracticaldev.s3.amazonaws.com/i/tle8fi6peg4nsttklkid.PNG)

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.

```css
p {
  margin-left: 1em;
  margin-left: 2em; /* The browser will use this declaration*/
}
```
```css
p {
  font-family: "Trebuchet Ms", Verdana;
  font-family: "Times New Roman", Georgia; /* The browser will use this declaration */
  font-size: 50px;
}
```
```css
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]( https://www.quora.com/What-is-cascading-is-CSS/answer/Heidi-Cool ).

Once you feel comfortable with The Cascade, Read [Introducing the Cascade] ( https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade ) on the Mozilla Developer Network.

Next, _CSS Inheritance_.