CSS is a styling or markup language that has become the cornerstone of web pages with HTML and JavaScript. So what does “cascading in CSS mean?
Cascading in CSS comes from how style rules are applied to a specific element based on the inherent hierarchy built into the language, known as specificity. Styling rules in your CSS document effectively cascade down from sources with higher importance to those of lowest importance.
When used and understood correctly, the ability to cascade your styles to different elements can be a powerful tool. If used incorrectly, it can cause wasted development time and confusion (especially if you are a beginner), so it is important to understand how cascading works as early as possible in your coding journey.
The rest of this article will explain the cascade as simply as possible so that it is easy for you as a beginner to understand and assume no prior knowledge of CSS.
How does CSS cascade work?
Before I get more technical and start talking about declarations and things that could scare a beginner coder, allow me to simplify cascading in one sentence, cascading is applying styles in order from top to bottom.
The cascade in CSS is a predefined set of rules that determines which CSS styles should be applied to specific elements. This predefined set of rules is governed by what is referred to as specificity.
The CSS cascade works by applying the styling rule to an element with the most importance. The rule that is applied considers the cascade and specificity to determine how an element should be styled should be applied.
Only CSS declarations with property and value pairs are influenced by the cascade. If you are unsure about what a CSS declaration, property or basic syntax of CSS is you can learn more about that in this article.
What are the cascading rules?
You need to be aware of two main rules when referring to cascading in CSS, namely top to bottom and specificity. These rules will be covered in detail with basic coding examples.
Top to bottom cascade with code example
Lets assume I have an HTML document with a <h2> tag with some content and I apply the following CSS code.
h2{
font-size: 40px;
}
h2{
color: green;
}
The browser would render the following;
The browser is doing this because it applies the CSS from top to bottom and cascades the styling along. The browser read the first declaration making the font 40 Px, and then read the line to apply the colour.
The above code could also have been written as a single declaration, which would have resulted in the same result in the browser.
h2{
font-size: 40px;
color: green;
}
What if you apply a different property value to the same property in CSS?
Cascading styles are applied from top to bottom. If you have applied different property values to the same property in different areas of your CSS, the last property value will be rendered.
Lets assume you CSS contains the following code:
h2{
font-size: 40px;
}
h2{
color: green;
}
h2{
color: red;
}
Your browser would render the following:
The browser has not missed the line applying the green; it was applied but then overwritten by the line changing the colour to red.
What is specificity in CSS
The cascade considers many more factors than simply the order in which code is written. It does this through specificity.
Specificity is a score determined by CSS to determine which style should apply to an element. The score is calculated based on what selector is used to style an element. For example, if you have a type selector and a class selector, the class selector has a higher score according to the rules of specificity.
You can learn more about how to calculate specificity here.
Specificity in CSS with a code example
Lets assume you have the following HTML document that contains two <h2> tags. One of the <h2> tags has a class attribute while the other does not.
<!DOCTYPE html>
<html>
<head>
<title>Learn more about how to calculate specificity here</title>
</head>
<body>
<h2 class ="Heading"> This heading has a class attribute</h2>
<h2> This heeding has NO class attribute</h2>
</body>
</html>
Now let us apply the following CSS code, where we style the one heading using the type selector h2 and the other where we style the heading with the class selector.
h2{
color: green;
}
.Heading{
color: red;
}
If CSS were only applying a top-down approach, you may think that the browser would render two lines, the first being green and the second red, in the order of the CSS code. However, below is what this CSS code renders in the browser
Conclusion
CSS is called cascading because the styling principles waterfall down from the element f highest importance to that of lowest importance.
While understanding cascading and how the cascading score is calculated and applied can be considered an academic exercise. It is quick to learn and can save you hours of debugging your code.
Become a master at specificity and understand the exact calculations by clicking here.
Click here to get our FREE CSS Properties Cheat Sheet for Beginners to help you on your coding journey!
Follow my coding journey, and let us start building a community of new coders. Click Here to signup for our Discord -we can’t wait to meet you!
