The browser's own styles, before you write any CSS
No CSS tab at all, yet every element has styles: they come from the user-agent stylesheet. getComputedStyle (JavaScript) reads the final value of any property. 32px is 2em of the default 16px; 21.44px is 0.67em of 32px.
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 font-size: 32px
h1 font-weight: 700
h1 margin-top: 21.44px
body margin: 8px
link color: rgb(0, 0, 238)