loading...

The CSS Cascade

ziizium profile image Habdul Hazeez ・3 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

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.

Calculating CSS Specificity with the 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.

The Effect of CSS Cascade shown with the Browser Developer Tools in Firefox 70

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.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on Oct 31 '19 by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide