Same HTML, two different looks
Delete the whole CSS tab and run: the content is all still there, with the browser's plain default look. Then try your own colours.
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.