You've built structure with HTML — the bricks of the house. Now comes the paint, the colour, the layout: CSS, Cascading Style Sheets. This is where pages stop looking like a 1995 document and start looking like a real website. And because you'll see every change live in the playground, it's genuinely fun.
1The anatomy of a CSS rule
CSS works by picking elements and giving them style. A single rule looks like this:
- The selector (
h1) chooses which elements to style. - Inside the braces are declarations: a property (
color) and a value (orange), separated by a colon and ended with a semicolon.
You can stack as many declarations as you like inside one rule — color, font-size, padding, and so on, each ending in a semicolon.
- A CSS rule = selector + declarations inside braces.
- A declaration is
property: value;— e.g.color: orange;. - You can put many declarations in one rule, each ended with a semicolon.
2Three ways to add CSS
| Method | How | Verdict |
|---|---|---|
| Inline | A style attribute on one element: <p style="color:red"> | Avoid — hard to maintain, can't reuse. |
| Internal | A <style> block in the <head> | Fine for a single page or a quick demo. |
| External | A separate .css file linked in the head | Best. One file styles your whole site. |
The recommended way is an external stylesheet, linked once in the head:
<link rel="stylesheet" href="styles.css">
- Inline (
styleattribute) — avoid; can't reuse and clutters HTML. - Internal (
<style>in the head) — fine for one page. - External (
<link rel="stylesheet">) — best; one file styles the whole site.
3Selectors — choosing what to style
Selectors are how you point CSS at the right elements. The three you'll use constantly:
| Selector | Targets | Example |
|---|---|---|
| Element | every element of that type | p { } — all paragraphs |
Class (.) | any element with that class | .card { } — <div class="card"> |
id (#) | the one element with that id | #header { } — <div id="header"> |
You'll lean on class selectors most — they're reusable across many elements, exactly as you learned in the Attributes lesson. Edit the playground below and watch the .highlight class style only the elements that carry it.
- Element selector (
p) targets every element of that type. - Class selector (
.name) targets any element with that class — reusable, your everyday tool. - id selector (
#name) targets the single element with that id.
★ Practical: style a tiny page
In any playground, write CSS that:
- Sets the
colorandfont-familyof all paragraphs with an element selector. - Creates a
.boxclass with a background colour and some padding, and applies it to two elements. - Uses an id selector to style one unique heading.
- Confirm the class styles multiple elements while the id styles only one.
Ready to test yourself?
Take the short quiz. Score 60% or more to mark this lesson complete.
Start the quiz →💡 Log in to save your progress and earn the certificate.