Your first rules, a conflict and inheritance
The heading is navy (the later rule won for color) but keeps letter-spacing from the first rule. The first paragraph inherits dimgray from body; .note sets its own colour.
CSS is a list of rules that say which elements to style and how; the browser matches every rule to the page, settles conflicts with the cascade, then lays out and paints the result.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a rule that makes every paragraph's text navy and 20px in size.
Write CSS so the whole page uses a sans-serif font with one rule, without writing a rule for each element. What feature makes this work?
A page has h2 { color: green; } and later h2 { color: orange; font-style: italic; }. What colour and style does an h2 get?
Explain it without notes
What is CSS, and what does it change about a page?
Name the parts of the rule p { color: red; font-size: 18px; }.
Why does an <h1> look big and bold even when you've written no CSS?
Describe the rendering pipeline from HTML and CSS to pixels on the screen.
Preview
Console
Nothing logged yet.Expected console output
h1 -> rgb(0, 0, 128)
p -> rgb(105, 105, 105)
.note -> rgb(46, 139, 87)
h1 letter-spacing: 1px