Cascading Order
The lassi's price is green in one rule, black in another and orange in a third. Only one colour can reach the screen. The cascade is the browser's fixed procedure for picking the winner, and once you know its order, "why is my CSS not working?" becomes a question you can answer in seconds.
The rule
Importance first, then inline, then specificity, then the last one wins.
When several declarations set the same property on the same element, the browser checks these in order and stops at the first one that separates them:
- Importance. A declaration marked
!importantbeats every normal one. - Inline. A declaration in a
styleattribute beats any selector-based rule of the same importance. - Specificity. The more specific selector wins. Count it as three columns, (ids, classes, elements):
#menuis (1,0,0),.dish .priceis (0,2,0),.priceis (0,1,0),pis (0,0,1). Compare the left column first; only if it ties, move right. - Source order. If everything else ties, the declaration that comes later wins.
One thing is not on the list: whether CSS came from a <style> element or a linked file. Both are just stylesheets. Whichever the browser reads later wins a tie.
.price { color: orange; } /* (0,1,0) */
.dish .price { color: teal; } /* (0,2,0) */
p { color: black; } /* (0,0,1), comes last */The lassi's price is teal. Nothing is important or inline, so specificity decides, and (0,2,0) is highest. Coming last does not rescue p.
The shortcut
Walk the four gates in order and stop at the first difference. Most puzzles are settled at gate 3 or 4.
Gather the contenders
style.csshas#menu p { color: navy; }. A laterstyleelement has.dish .price { color: teal; }. The tag carries nostyleattribute.
The trap: assuming later always wins. Source order is the last tiebreaker, not the first.
Drills
Answer fast — trust the rule.
A style element sets p { color: red; }. After it, a link loads a file with p { color: blue; }. What colour are the paragraphs?
.price { color: green; } appears first and p { color: black; } later. What colour is <p class="price">?
The stylesheet has p { color: black !important; }. The tag has style="color: green;". Which colour shows?
Which selector has the higher specificity: .dish.special .price or #visit p?
.special .price { color: orange; } comes first and .dish .price { color: teal; } comes later. What colour is the lassi's price?
Remember
- Importance → inline → specificity → source order; stop at the first difference.
- Specificity is (ids, classes, elements), compared left to right.
- Internal versus external has no rank; only order breaks ties.