The CSS Cascade: Understanding How Styles Are Applied

What is the CSS Cascade?

The cascade is the algorithm that CSS uses to decide which styles get applied to each element. The "C" in CSS stands for "Cascading" — it is the fundamental mechanism that makes the entire language work.

When multiple CSS rules target the same element, the cascade determines which rule wins using a specific set of criteria.

The Three Pillars of the Cascade

The cascade resolves conflicts using three factors, evaluated in this order:

1. Origin and Importance
2. Specificity
3. Source Order

If the first factor produces a clear winner, the cascade stops. If not, it moves to the next factor.

Pillar 1: Origin and Importance

CSS styles come from different origins, and each origin has a different priority level.

Style Origins (Lowest to Highest Priority)

1. User Agent Styles — Default browser styles (e.g., blue underlined links)
2. User Styles — Custom styles set by the user in their browser
3. Author Styles — The CSS you write for your website
4. Author !important — Your styles marked with !important
5. User !important — User styles marked with !important (accessibility)

/* Author style - normal priority */
a { color: blue; }

/* Author !important - overrides normal author styles */
a { color: red !important; }

Pillar 2: Specificity

When two rules come from the same origin and have the same importance level, the cascade uses specificity to determine the winner. We covered specificity in detail in the previous article.

/* Lower specificity (0,0,1,0) */
.button { background: blue; }

/* Higher specificity (0,1,0,0) - THIS WINS */
#submit { background: green; }

Pillar 3: Source Order

When two rules have the same origin AND the same specificity, the rule that appears last in the source code wins.

.title { color: blue; }
.title { color: red; }
/* Red wins - it comes last with equal specificity */

This is also why the order of your stylesheet links in HTML matters:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
<!-- theme.css overrides base.css for equal specificity rules -->

How the Cascade Works Step by Step

When the browser needs to determine the value of a CSS property for an element, it follows these steps:

1. Collect all declarations that apply to the element for that property
2. Sort by origin and importance
3. Sort by specificity within the same origin
4. Sort by source order for equal specificity
5. Apply the winning value

Example Walkthrough

<p id="intro" class="text" style="color: purple;">Hello</p>

p { color: black; }           /* (0,0,0,1) */
.text { color: blue; }        /* (0,0,1,0) */
#intro { color: green; }      /* (0,1,0,0) */

The cascade resolves this by checking:

• All rules have the same origin (author styles)
• No !important declarations
• The inline style style="color: purple" has the highest specificity
• Result: The paragraph is purple

Understanding !important

The !important declaration is a way to force a style to win regardless of specificity:

.button {
  background: blue !important;
}

#special-button {
  background: red; /* This loses even though ID > class */
}

When to Use !important

• Utility classes that should always apply
• Overriding third-party CSS you cannot modify
• Accessibility styles that must never be overridden

When NOT to Use !important

• To fix a specificity conflict you don't understand
• As a habit in regular stylesheets
• In component-level CSS

Inherited vs Cascaded Values

Not all CSS properties participate in the cascade equally. Some properties are inherited from parent elements:

body {
  color: #333;       /* Inherited by all child elements */
  font-family: Arial; /* Inherited by all child elements */
  border: 1px solid;  /* NOT inherited */
}

Commonly inherited properties: color, font-family, font-size, line-height, text-align, visibility

Not inherited: margin, padding, border, background, width, height, display

Cascade Layers (Modern CSS)

CSS now supports @layer for better cascade control:

@layer base, components, utilities;

@layer base {
  p { color: black; }
}

@layer components {
  .card p { color: blue; }
}

@layer utilities {
  .text-red { color: red; }
}

Layers declared later have higher priority, giving you explicit control over the cascade order.

Summary

The CSS cascade is the core algorithm that determines which styles are applied. It evaluates three factors in order: origin and importance, specificity, and source order. Understanding the cascade helps you write predictable CSS, debug style conflicts, and avoid relying on hacks like !important.