Lesson 5 of 12
Structured learning draftControl the CSS cascade
CSS resolves competing declarations through origin and importance, cascade layers, specificity, scoping proximity and source order. Maintainable styles make that resolution easy to predict. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Predict which declaration wins.
- Use inheritance and custom properties deliberately.
- Avoid escalating selector specificity.
Control the CSS cascade
Control the CSS cascade: cascade to specificity to inheritance.
Predict which declaration wins.
Use inheritance and custom properties deliberately.
Avoid escalating selector specificity.
@layer reset, base, components;
@layer base {
:root { --brand: #075985; --space: 1rem; }
body { color: #172033; font: 1rem/1.6 system-ui, sans-serif; }
a { color: var(--brand); }
}
@layer components {
.project-card { padding: var(--space); }
.project-card__title { color: inherit; }
}Specificity is compared only after higher-priority cascade criteria. Classes are generally easier to reuse than IDs. Inherited properties such as color flow to descendants; box properties such as margin do not. Custom properties participate in the cascade and can express design decisions without duplicating values.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Adding !important whenever a rule loses.
- Using deeply nested selectors tied to markup.
- Confusing inheritance with initial or default values.
Practice activity
Apply the lesson
Given six conflicting rules, predict the winner before opening developer tools. Then refactor the stylesheet into named layers with class selectors. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
When two same-origin, unlayered class rules have equal specificity, what normally decides the winner?
Lesson summary
- The cascade is an ordering algorithm.
- Low-specificity selectors are easier to override.
- Developer tools show matched and overridden declarations.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note