Origin
Browser defaults, user styles and author styles do not all have the same priority.
Platform under construction
The Cascade
The cascade is the decision system behind CSS. It explains why one declaration wins, why another disappears and why adding more CSS is not always the fix.
.button { background: #101827; }
.button--primary { background: #8cffc1; }
.button { background: #62d5ff; }
Cascade & Control
The cascade is not chaos. It is the browser following rules.
CSS can receive declarations from several places: browser defaults, user settings, external stylesheets, internal CSS, inline styles and sometimes layers. The cascade decides which declaration controls the final value.
When two declarations target the same property on the same element, the browser does not guess. It compares importance, cascade layers, specificity and source order until one declaration wins.
If CSS ever feels random, it usually means you are missing one of those comparisons. Once you understand the cascade, CSS starts to feel much more logical.
Importance
!important changes the normal order and should be treated carefully.
Specificity
More specific selectors can beat less specific selectors.
Source order
When everything else is equal, later CSS wins.
Visual model
Control CSS by understanding the browser decision path.
The browser does not apply styles emotionally. It follows a priority system. These diagrams make that priority visible before you start changing declarations.
Origin
Where did the rule come from? Browser, user or author CSS?
Importance
Is the declaration normal or marked !important?
Layer
Does a cascade layer control priority?
Specificity
How strongly does the selector target the element?
Order
If everything ties, which declaration appears last?
Examples
Write CSS that wins for a reason.
Cascade-aware CSS
.button {
background: #101827;
color: #f7f9ff;
}
.button--primary {
background: #8cffc1;
color: #061018;
}
Fighting the cascade blindly
.button { background: blue !important; }
.button.button.button { background: green; }
main section div .button { background: orange; }
.button { background: red !important; }
Rules that matter
Control comes from reducing surprise.
CSS becomes easier when every override has a reason. If a rule wins by accident, the next developer has to debug your intention instead of the code.
Start with the winning declaration
Inspect the element and find which rule currently wins before adding more CSS.
Compare one property at a time
The cascade decides per property, not per whole selector block.
Avoid selector battles
If two selectors keep fighting, simplify the component structure.
Use classes intentionally
Modifier classes are often cleaner than deep selectors.
Do not reach for !important first
It can solve one problem while creating the next one.
Remember inheritance
Some values are inherited even when no rule directly targets the child element.
Production thinking
The cascade is architecture, not trivia.
Why does this matter?
The cascade is the reason CSS can be flexible and reusable. It also explains most beginner frustration. Learn it early and debugging becomes evidence instead of superstition.
Accessibility
A cascade mistake can hide focus states, reduce contrast or override readable text sizes. Inspect important accessibility styles before shipping.
Production note
Production CSS should have predictable layers of responsibility: base rules, layout rules, component rules, utilities and controlled overrides.
SEO note
Search engines care about accessible content and user experience. Cascade mistakes that make content hard to read or interact with indirectly hurt performance.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Move the last .button rule above .button--primary and run the preview.
- Change only one background declaration and predict which one wins first.
- Add color to .button--primary and check whether it wins over .button.
Practice assignment
Do this before moving to the next lesson.
- Create two CSS rules that target the same element and same property.
- Predict which one wins before running the preview.
- Use DevTools or the visible result to verify your prediction.
Try it yourself
Find which button declaration wins
Self-check
Before you continue, prove that you understand The Cascade.
Answer these questions before moving on. If the answer is vague, inspect the lab example and trace which declaration wins.
- Can you explain why one declaration wins over another?
- Can you name at least three cascade factors?
- Can you debug a rule without adding !important?
- Can you explain why the cascade works per property?
- Can you use source order intentionally without making CSS fragile?
Senior audit upgrade
The cascade is a decision tree, not a mystery.
When two declarations target the same property, the browser compares origin, importance, layers, specificity, scoping and source order. Source order only wins after the earlier factors are tied.
1. Origin and importance
Browser, user and author styles are compared first, with important declarations treated separately.
2. Layers and specificity
Layer order can beat selector weight. Within the winning layer, specificity starts to matter.
3. Source order
Later only wins when the declarations are otherwise in the same cascade position.
origin -> importance -> layer -> specificity -> scope proximity -> source order