Origin, inline style, importance and order
The CSS tab is placed in the page's head, and the <style> element in the HTML tab comes later in the document, so its .late rule wins the tie.
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
Link: darkorange
Paragraph 1: navy
Paragraph 2: purple
Paragraph 3: seagreen
Paragraph 4: tomato