What is the CSS Cascade?
The cascade is the algorithm browsers use to combine styles from multiple sources and resolve conflicts. It's the "C" in CSS -- Cascading Style Sheets -- and it determines which rule ultimately applies to every element on the page.
TL;DR
- 1.The cascade resolves conflicts using three factors in order: origin/importance, then specificity, then source order.
- 2.
!importantrules beat normal rules regardless of specificity or source order. - 3.When specificity is equal, the last rule in source order wins.
- 4.
@layerlets you control cascade priority explicitly, avoiding specificity wars.
Simple Explanation
Imagine you're getting dressed and three people give you advice: your friend says "wear a blue shirt," your boss says "wear a white shirt," and your doctor says "wear a comfortable shirt."
The cascade is your brain's process for deciding which advice to follow. First, you consider who's talking (origin) -- the doctor's health advice might override your friend. Then you consider how specific the advice is -- "wear this exact white oxford" beats "wear something white." If two pieces of advice are equally important and specific, you go with whoever spoke last.
CSS works the same way. Multiple stylesheets give the browser conflicting rules, and the cascade algorithm decides which rule wins for each property on each element.
The Cascade Algorithm (Step by Step)
The browser evaluates conflicting rules in this order. It stops as soon as one step produces a clear winner.
Origin and Importance
The browser considers where the style comes from and whether it's marked !important.
Priority (highest to lowest): User-agent !important > User !important > Author !important > Author normal > User normal > User-agent normal
Cascade Layers (@layer)
If both rules are from the same origin, the browser checks which cascade layer they belong to.
Layers defined later have higher priority. Unlayered styles beat all layers.
Specificity
If same origin and layer, the browser compares selector specificity.
ID selectors > Class selectors > Element selectors
Source Order
If everything else is equal, the rule that appears later in the CSS wins.
This includes the order of <link> tags, @import order, and position within a file.
Code Examples
Source order in action
/* Same specificity (0, 1, 0) */
.btn { color: blue; }
.btn { color: red; }
/* Winner: red (appears last in source) */Cascade layers example
/* Define layer order */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
a { color: blue; }
}
@layer components {
.nav-link { color: gray; }
}
@layer utilities {
.text-red { color: red; }
}
/* utilities layer wins over components,
which wins over base,
which wins over reset */Common Mistakes
Don't
/* Loading your CSS before the framework -- framework wins because it comes later */ <link href="my-styles.css"> <link href="bootstrap.css">
Do
/* Load framework first, then your overrides come last */ <link href="bootstrap.css"> <link href="my-styles.css">
Don't
/* Scattering !important to fix
cascade conflicts */
.btn {
color: red !important;
background: blue !important;
}Do
/* Use @layer to control priority
cleanly without !important */
@layer vendor, app;
@layer vendor { /* third-party */ }
@layer app { /* your styles */ }
See the cascade in action on any website
Frontend Hero's CSS Scanner shows you computed styles and matched rules for any element. See exactly how the cascade resolves conflicts in real code.
Try CSS Scanner →Browser Support
The cascade algorithm is fundamental to all browsers and has worked consistently since CSS1. The newer @layer feature is supported in Chrome 99+, Firefox 97+, Safari 15.4+, and Edge 99+ (all released in early 2022), giving it excellent modern browser support.
Related Tools
Frequently Asked Questions
The cascade is the entire algorithm the browser uses to decide which styles apply. Specificity is just one step in that algorithm. The cascade considers (in order): 1) Origin and importance (!important vs normal), 2) Specificity of selectors, 3) Source order (last rule wins when all else is equal). Specificity only matters when rules come from the same origin and importance level.
Cascade layers (CSS @layer) let you group styles into named layers and define their priority order explicitly. Styles in later-defined layers beat earlier layers, regardless of specificity. This solves specificity wars because you can put third-party styles in a low-priority layer and your own styles in a higher-priority layer. Example: @layer base, components, utilities;
Yes. When two rules have the same specificity, the one that appears later in the source wins. This includes the order of <link> tags, @import statements, and the position within a single stylesheet. This is why your custom CSS should typically be loaded after framework or reset stylesheets.
Inheritance and the cascade are related but different. Inheritance means children elements receive certain property values from their parents (like color and font-family). The cascade decides which declared value wins when multiple rules target the same element. Inherited values only apply when no rule explicitly sets that property on the element.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is Box Shadow?
Add depth with shadow effects
What is a CSS Reset?
Normalize browser defaults
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen