The Cascade

How CSS rules interact and overwrite

The ‘C’ in CSS stands for cascade. This page explains what happens when several rules target the same element – which one wins, and why.

What is the cascade?

When multiple CSS rules could apply to one element, the cascade picks the winner. It is the tie-breaker that keeps styling predictable instead of chaotic.

Three factors: importance, specificity, source order

The cascade weighs three things, in order:

Importance: a declaration marked !important beats a normal one. Powerful, but easy to abuse – use it as a last resort, not a default.
Specificity: a more precise selector wins over a vague one.
Source order: if specificity is equal, the rule declared last wins.

Specificity

Specificity is often explained as a points system:

ID selectors: 100 points
Class selectors, pseudo-classes, and attribute selectors: 10 points
Type selectors and pseudo-elements: 1 point

Inline styles on an element’s style attribute score highest – roughly 1,000 points in this simplified model.

Example:

#header { /* ID selector, specificity = 100 */
    background-color: blue;
}

.container #header { /* Class selector + ID selector, specificity = 110 */
    background-color: green;
}

#header gets a green background because .container #header has higher specificity.

The role of `!important`

!important overrides normal specificity rules. That sounds useful, but overusing it makes CSS hard to debug and maintain. Reach for it only when you genuinely have no cleaner option.

Source order

When two selectors have equal specificity, the one that appears later in the stylesheet wins.

h1 {
    color: red;
}

h1 {
    color: blue;
}

<h1> elements end up blue because that rule comes second.

Inheritance and the cascade

Some properties – like font-family and color – pass from parent to child if the child has no value set. Not every property inherits. Inheritance and the cascade interact, so both matter when debugging.

A worked example

Here is a small page with overlapping rules:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #333;
        }
        #content p {
            color: red;
        }
        .highlight {
            color: green;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>Paragraph 1</p>
        <p class="highlight">Paragraph 2</p>
    </div>
    <p>Paragraph 3</p>
</body>
</html>

Paragraph 1 is red – matched by #content p (specificity 101).
Paragraph 2 is also red – #content p (101) beats .highlight (10) even though the element has both selectors.
Paragraph 3 is blue – it sits outside #content, so only the p rule (specificity 1) applies.

Summary

When a style does not stick, check importance, specificity, and source order in that order. Most ‘mystery’ CSS bugs come down to one of these three.