Three rules, one paragraph: who wins?
Every paragraph is bold: the font-weight rule had no competitor. The colour battle is decided by specificity, not by order. getComputedStyle reports colours as rgb(...) and bold as 700.
When several declarations try to set the same property on the same element, the cascade picks exactly one winner by comparing, in order: origin and importance, inline style, cascade layer, specificity, and order of appearance.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS for <p class="intro">Hello</p> with two rules for .intro: the first sets color: red, the second color: green. Which colour shows? Then make red win without !important and without changing the HTML.
Given the HTML <h1 class="title">Hi</h1> and the rules h1 { color: navy; font-size: 40px; } and .title { color: tomato; }, what colour and size does the heading get?
Explain it without notes
Name the steps of the cascade in order, and say what each one compares.
What is an origin? Name the three origins and how they rank for normal declarations.
A rule #box { color: red } is written at the top of a file and .box { color: blue } at the bottom. Both match the same element. Which colour wins and why?
What happens to a property that no declaration sets?
Preview
Console
Nothing logged yet.Expected console output
Paragraph 1: crimson 700
Paragraph 2: seagreen 700
Paragraph 3: steelblue 700