Your first stylesheet: colour and size
HTML says what a thing is. CSS says what it should look like. CSS goes in a
<style> block at the top of the page, and the browser applies each rule to
every element that matches it.
A rule is three parts. In h2 { color: navy; }, the h2 out front is the
selector: it names what to style, and a bare tag name means every h2 on the
page. The curly braces hold the block. Inside go the declarations - a
property, a colon, a value, a semicolon - as many as you want. That is the
entire grammar. Everything else in CSS is which properties exist, and which
elements a selector reaches.
Now the part that costs people afternoons: CSS never errors. Write
colour: red instead of color: red and you get no error and nothing in the
console. The browser cannot parse that declaration, so it drops that one line,
applies the rest of the block, and carries on drawing. A typo looks exactly
like a rule you never wrote - which is why "CSS is broken" is almost always a
spelling mistake. Check the spelling before you doubt anything else.
Your task: the closure notice is drawn as ordinary text and people keep
missing it. Add a <style> block that gives the paragraph a color of red
and a font-size of 24px. The heading stays exactly as it is.
You'll practice:
- Writing a rule: a selector, a block, and property-value pairs inside it
- Aiming a rule at one kind of element by its tag name
Related reading: Selectors and the Cascade →