Lesson 5 · about 15 minutes

🎨 CSS: Time to Paint the House

Your product page has strong walls now. But it's still gray and boring, like an unpainted house. Today you grab the paint bucket — and your page suddenly looks DESIGNED.

🎬 Watch first (90 seconds)

Meet the paint

Remember the house? HTML = walls, CSS = paint, JavaScript = electricity. Until today you only built walls. CSS (Cascading Style Sheets) is the language that tells the browser how things should LOOK: colors, sizes, fonts, everything pretty.

And here's the great news: a CSS rule is a tiny sentence with only three parts.

💡 The one idea of this lesson Every CSS rule has three parts: selector { property: value; }

h1 {
  color: purple;
}

The selector says WHO gets painted → h1 means "all the h1 headlines!"
The property says WHAT about them → color means "their text color".
The value is your choice → purple. Because purple is awesome.

It's like shouting: "Hey, all h1s! Your hair color is now purple!" Don't forget the ; at the end of each line and the { } curly braces around the rules.

Where do these rules live? Inside a <style> element, which goes in the <head> of your page — the invisible backpack part from lesson 2. Here are the five paint colors on your brush today:

color → the color of the text
background-color → the color BEHIND the text
font-family → the shape of the letters (try sans-serif — clean and modern)
font-size → how big the letters are (like 20px)
text-align → where the text sits: left, center, or right

For colors, you can just use their names: purple, gold, tomato, hotpink, midnightblue... yes, tomato is a real CSS color. 🍅

🛠️ Build it (the fun part)

🧪 Your mission Give your product page its first paint job. When you refresh, your plain page will suddenly look like someone designed it. Because someone did. You.

Open practice/myshop.html in VS Code.
Find the <head> section (up near the top, where the <title> lives).

Right after the <title> line, add a <style> block. Type it — don't copy-paste! Pick YOUR OWN colors:

<style>
  body {
    background-color: lightyellow;
    font-family: sans-serif;
  }
  h1 {
    color: tomato;
    text-align: center;
  }
</style>

Save (⌘S), then refresh the browser (⌘R).
WHOA. 🤯 Background color, new letters, centered headline — your page just went from "homework" to "designed". Try swapping the colors a few times. Nobody paints a house right on the first try.

🕹️ Try it right here — the lesson checks your code!

Type in the dark box and watch the preview. The preview understands CSS too — the moment you type a color, it PAINTS. Then press Check my code ✔.

🔨 Now break it!

Time to break your paint job in practice/myshop.html and see what happens. Predict what will happen BEFORE you refresh!

Misspell a property: change color: tomato; to colr: tomato;. Save, refresh. Nothing breaks... the color just quietly disappears! CSS never shows an error — the browser silently ignores lines it doesn't understand. Sneaky! With HTML the page went weird; with CSS it just shrugs. Fix the spelling and the color comes back.
Delete one closing } from your first rule. Save, refresh. Watch every rule AFTER it die too. One missing brace can knock out half your paint job.
Put the } back. Now add a new rule: p { font-size: 50px; }. Giant paragraphs! Try 8px too. Which size is nicest to read?

⚠️ If your styles do nothing at all Check three things: is your rule INSIDE <style> and </style>? Is every property spelled exactly right (background-color, with the dash)? And did you save before refreshing? CSS won't complain — it just quietly ignores mistakes.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Styling the content — the official beginner CSS guide from Mozilla (the Firefox people). It paints the same sample page you'd build in their course, with a few extra tricks. Reading it counts as a lesson block!