Freeborn Charles Blog

What does the Cascade Mean in CSS?

March 16, 2021

What does the Cascade mean in CSS

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. - CSS Spec

Cascade in CSS is the interpretation of style rules from top to bottom.

The cascade is the set of rules of how different styles fit together, override each other and how the browser puts together these different variables and renders them. - Mariam Suzanne

As a presentation layer, CSS interpets how elements are styled and rendered in the browser according to the style rule, using a top to bottom order. And this is the underlying premise of the Cascade in CSS.

From the definition above, this is what happens when we talk about cascade. First there is the set of rules (property/value pair) stating how the style should be rendered.

These rules can then be overriden by the cascade, following the order in which the rules were written. When there is conflict in the rules, assumiong the conflicting rules have the same weight and specificity, then the latest rule takes precedence.

The Cascade in CSS means that style-rules are interpreted from top to bottom, such that should elements have the same weight and specificity, the latest style rule will be applied.

So the cascade helps in resolving conflicting style-rules. Here is an example.

<p>This is a sample text</p>
p{
    color: blue;
}

p{
    color: lightgreen;
}

/* The text color will be lightgreen because it appears last in the order of the style rule. */

Welcome to my digital garden where I share my learnings and cogitations on the modern web development - JavaScript and its ecosystem, React, Gatsby, JAMstack - all written by Charles Freeborn a front-end developer and technical writer. Follow me on:Twitter|GitHub