Press ▶ Show page to see your page here.
Lesson 46: CSS: colours and style
Level 6, Make a Web Page. Colour the page with rules in style.css. The new word: CSS. It follows lesson 45, HTML tags. Next comes lesson 47, A pinch of JavaScript.
What the lesson explains
CSS: the looks. One file says what things are. Another says how they look.
A CSS rule. What to style, then a property, then its value. h1 what to style; color the property; purple the value.
The link. One line in the head joins style.css to the page. On the card: <link rel="stylesheet" href="style.css">
What you do first
Colour the title. Make the h1 purple. One way: write in style.css: color: purple;. Then press Show page to see it.
The files on the practice computer
This lesson works in 0 folders. At the start, .
You change nothing here, so lesson 47 finds the same files.
The page on the screen
CSS: the looks. The page uses the tags <h1>, <p>, and its big title reads "All about pets". Its style.css has 1 rule.
A CSS rule. The page uses the tags <h1>, <p>, and its big title reads "All about pets". Its style.css has 1 rule.
The link. The page uses the tags <h1>, <p>, and its big title reads "All about pets". Its style.css has 1 rule.
What you practise
Try it, "Colour the title": Make the h1 purple. One way: write in style.css: color: purple;. Then press Show page to see it.
Try it, "Two more rules": Give body a background-color. One way: write in style.css: body { / background-color: lightyellow; / }. Then press Show page to see it. Then: Give p a font-size of 24px. One way: write in style.css: p { / font-size: 24px; / }. Then press Show page to see it.
Fix it, "A missing semicolon": Add the missing ; so both lines work. One way: write in style.css: color: red;. Then press Show page to see it.
Challenge, "Style it your way": Write three rules of your own. One way: write in style.css: h1 { / color: teal; / } / body { …. Then press Show page to see it.
What PlayBuddy and PlayType say
PlayType: "HTML says what things are. CSS says how they look!"
PlayBuddy: "Pick the thing, then the property, then the value. Done!"
Help in every lesson
Everything happens on a pretend computer in your browser, so nothing touches your real files. PlayBuddy and PlayType stand beside the board, cheer you on and say when it is your turn.
A green ring shows where to click the first time. After that you do it on your own, and if you slip twice the ring comes back.
Stars
The lesson has 5 things to do. Up to one slip in ten gives three stars, up to one in four gives two, and finishing always gives at least one. Stars and progress are saved in this browser only; there is no account.
About DayOneCode
DayOneCode is an independent learning site, not affiliated with or endorsed by Anthropic. Claude and Claude Code are trademarks of Anthropic.