The Cascade & Specificity Wars
The "C" in CSS stands for Cascading. When two CSS rules target the exact same element with conflicting properties, the browser uses a scoring formula called Specificity to declare the winner. Whoever has the highest rank wins!
"Think of military rank. An element selector (p) is a Private (Score: 1). A class selector (.alert) is a Captain (Score: 10). An ID selector (#main-alert) is a General (Score: 100). An inline style is the President. If a Private and a General give conflicting orders, the General always wins!"
Deep Dive: How It Works
Order of Appearance: If two rules have the exact same specificity score, the one written LAST in the stylesheet wins (the cascade).
Specificity Hierarchy: Element tag (1pt) < Class / pseudo-class (10pts) < ID (100pts) < Inline style (1000pts).
The !important nuclear option: Overrides everything, but creates unmaintainable code wars. Avoid using !important in healthy codebases!
Inheritance: Some properties (like color and font-family) automatically trickle down from parent <body> to child elements.
Syntax Blueprint
/* Specificity: 1 pt */
p { color: white; }
/* Specificity: 10 pts (WINS!) */
.danger-text { color: #f87171; }Class selector has higher specificity score than tag selector and takes priority.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Using !important to fix every minor overrideWhy it happens: Frustration when a style doesn't apply.
How to fix: Check if an existing class or ID has higher specificity, and use a matching class instead.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Override a tag rule with a class
- Write a class rule for .active-link setting color: #38bdf8; and font-weight: bold;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.