The Cascade

The magical waterfall of CSS

Imagine the cascade as a majestic waterfall flowing down the rocks of your stylesheet. On its way down, it touches every element, but not all get equally wet — or in this case, equally enchanted.

At the very top of the waterfall are the inline styles, like massive boulders splashing directly into the water. They hold the most power because they appear right at the element. Further down, in gentler waves, are the external stylesheets, which cast a subtle but ever-present magic. But when all else fails, the !important spell comes into play — the wildcard spell that ignores all other rules and does whatever it pleases, because sometimes, rules are meant to be broken! It’s the stubborn spell that insists on having its way, no matter how many other spells try to interfere.

Let’s Keep Going

Hierarchies
Priorities

The Cascade

Because selectors vie for dominance – and some are simply better at swimming.

Hierarchies

How the Cascade Works

The winding paths of the CSS cascade follow a secret hierarchy that determines which styles take precedence in an HTML document.

Rule Overwriting Within a Document:
Rules with greater specificity—meaning more precise selectors—have the final say, overriding less specific ones. If a conflict arises between equally specific rules, the one appearing later in the document wins.

CSS Rule Hierarchy (Lowest (1) to Highest Priority (5))

Browser Defaults:
The dull, default styles the browser applies to all elements before your magic takes over.
Internal & External Stylesheets:
Rules in <style> tags in the head and external CSS files. The last included stylesheet has the final word.

Within a Stylesheet:
Element Selectors:
Rules applied to all elements of the same type.
Class Selectors:
Rules giving a unified look to a group of elements.
ID Selectors:
Rules targeting a single, special element—the VIP section of CSS.

Inline Styles:
CSS rules written directly within an HTML element’s style attribute.
!important Declarations:
When chaos ensues, the !important spell steps in, declaring itself the undisputed ruler. Use wisely, though, or chaos will reign!

In this lesson, you have learned…

How the CSS cascade works by ordering rules based on priority and specificity.
Why later CSS rules can overwrite earlier ones if they have the same weight.
How the hierarchy of selectors is structured, from element selectors to class selectors to ID selectors.
Why inline styles are stronger than stylesheets, but external CSS files ensure clean structure.
That !important overrides all other rules, but should be used sparingly to avoid chaos.

The Dancing Waterfall

A waterfall cascades over the rocks of Sunnyside Fields, but instead of pure water, selectors flow down. They dance and rush, gliding from the highest peaks to the tranquil, green valleys, where they unleash their powers. The journey of the cascade is a tale of order and priority, where every drop—whether strong like an ID selector or gentle like an element selector—has its own place and influence. Follow this waterfall and learn how the laws of the cascade keep your page in perfect harmony.

Your Task: Follow the Cascade’s Path

Reverse the Order: Reverse the order of the <style> and <link> tags in the head section of your HTML.
Question: What happens when you change the arrangement? Which selector is applied, and what rules are in your CSS file?
Class Selector: Create a rule for the class “title” with color: orange;.
Question: What happens to the rule of the element selector that is also applied to the heading?
ID Selector: Use the ID title-id to create a declaration. Set the font color to tomato.
Question: What happens to the preceding declarations?
Inline-Style: Add the following attribute to the <h1> element: style="color:blue;".
Question: Observe what happens when you add this inline style.
!important Rule: Use the !important rule in your CSS file to style the heading as follows: color: darkolivegreen !important;.
Question: What happens to the heading? Does this rule override all previous declarations?

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Dancing Waterfall</title>
    <!-- Step 2 Internal, external stylesheets, reverse the order, observe what happens. Then delete both rules for the next steps -->
    <style>
        h1 {
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="assets/css/07-cascade.css">
</head>

<body>
    <h1 class="title" id="title-id">Aetheron</h1>
    <!-- Step 4 Inline Styles -->
    <!--     <h1 class="title" style="color:blue">Aetheron</h1>  -->
</body>

</html>

CSS

/* Step 3.1 Element Selector */
h1 {
    color: green;
}

/* Step 3.2 Class Selector */
/* .title {
    color: orange;
} */

/* Step 3.2 Class Selector Order */
/* .title {
    color: purple;
} */

/* Step 3.3 ID Selector */
/* #title-id {
    color: tomato;
} */

/* Step 5 ID Selector with !important */
/* h1 {
    color: darkolivegreen !important;
} */

Let’s Keep Going