The question every course so far dodged

A promise from two courses ago

The previous course made a claim in passing: a media query rule must come after the base rule it overrides, because both rules have the same specificity, and this course would explain. Here's that explanation. It answers the question every CSS course so far has worked around: when two rules match the same element and disagree about a property, which one wins?

Source order alone was never the whole story

Earlier courses leaned on a simplified rule: "later in the file wins." That's only true when the two rules are equally specific. When they aren't, source order doesn't matter, and a rule written first can beat one written after. That surprises developers who think "I wrote this last, so it should win."

#hero-button {
  background: blue;
}

.button {
  background: red;   /* written second, but does NOT win */
}

<button id="hero-button" class="button">Click me</button>

The button renders blue, not red, though .button comes second. #hero-button wins because an ID selector is worth more than a class selector, wherever each sits in the stylesheet. That "worth more" is specificity. It's the tiebreaker that comes first, and source order only steps in when specificity is a tie.

The actual order of operations

CSS resolves a conflict between two matching rules in a fixed sequence, and this course gives each step a lesson:

1. Importance      → is either declaration marked !important? (lesson 6)
2. Specificity      → which selector is structurally "worth more"? (lessons 2-4)
3. Source order     → if specificity ties exactly, whichever rule was written last wins (lesson 5)

!important sits above specificity. A normal declaration loses to an !important one however specific its selector is. That's why lesson 6 treats !important as a rare escape hatch, not a way to win ordinary disputes.

Why this matters more as a project grows

A small example rarely hits this. Real stylesheets, with dozens of files and months of additions, hit specificity conflicts constantly. Without a clear model, "add another class" or "use !important" becomes a habit that makes every later conflict harder. Understanding specificity turns "I have no idea why this color won't change" into "I see why, and how to fix it".

What this course covers

• Lesson 1, The question every course so far dodged: cascade order was never the whole story (you are here)
• Lesson 2, The specificity calculation: IDs, classes, and elements, and how their weights compare
• Lesson 3, Calculating real selectors: walking through actual selectors from this series step by step
• Lesson 4, Combinators and the universal selector add nothing: what doesn't count toward specificity
• Lesson 5, Source order as the tiebreaker: when "last one wins" applies
• Lesson 6, !important and inline styles: the two escape hatches, and why to avoid reaching for them
• Lesson 7, Putting it together: debugging real specificity conflicts, and writing CSS that avoids them

By the end, you'll be able to look at any two competing rules and say which one wins and why.