Session 20 — Make It Yours

Duration: 60 min · Format: live online · Ages: 8–11

Session goal: by the end, students can write simple CSS rules to change colours, fonts, backgrounds, and spacing, turning plain HTML into a page that looks like theirs.

Before class — prep (5 min)

• Open CodePen and start a new Pen. Notice there are three boxes: HTML, CSS, and JS — today you'll use HTML and CSS.
• Paste a small starter page into the HTML box so you can style it live (a heading, a paragraph, an image).
• Have a short list of colour names ready to show (red, teal, gold, hotpink, skyblue) — kids love picking these.
• Ask students to reopen the page sketch they made for homework in Session 19.

Agenda

0:00 · Hook (5 min)

Show a plain black-and-white HTML page on screen, then paste a few CSS rules and watch it burst into colour. Ask:

• "Same words, totally different look — what do you think just happened?"
• "If HTML is the bricks of a house, what would you call the paint, wallpaper, and furniture?"

Let them guess, then reveal: the paint and style is called CSS, and today you'll decorate the page you built last time.

0:05 · Teach — What is CSS? Colours and fonts (13 min)

Explain, writing the key words on your shared screen:

• CSS = Cascading Style Sheets. HTML says what's on the page; CSS says how it looks.
• A CSS rule has three parts: a selector (what to style), a property (what to change), and a value (what to change it to).
• The shape is always: selector { property: value; }

Share this diagram so students can see how HTML gives the plain structure while CSS adds the colour, fonts, and style on top:

Type this together in CodePen (in the CSS box):

h1 {
  color: teal;
}

Explain each part: h1 is which tag to style, color is the property, teal is the value. The ; ends the line and { } hold the rules.

⚠ Watch for the #1 CSS mistake: forgetting the semicolon ; at the end of a line, or the curly braces { }. If nothing changes, check those first, live.

Add a font and colour for paragraphs:

h1 {
  color: teal;
}
p {
  color: darkslategray;
  font-family: Arial;
}

Ask: "What do you think changes if I write color: hotpink; instead?" (Answer: the text turns hot pink — try it live.)

0:18 · Teach — Backgrounds and spacing (12 min)

Explain: you can colour the whole page background and add space so things aren't squashed together. The body selector styles the whole page.

Type this together in CodePen:

body {
  background-color: lightyellow;
  text-align: center;
}

Point out: background-color paints behind everything; text-align: center; pulls the text to the middle.

Now add spacing so it breathes:

body {
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
}
h1 {
  color: teal;
  margin-bottom: 10px;
}

Explain the two spacing words slowly:

• padding = space inside, between the edge and the content (like a cushion around it).
• margin = space outside, pushing other things away.

⚠ Watch for: spelling. It's background-color (with the dash and the American spelling color), not "background colour." A tiny typo means the rule is ignored.

Ask: "What's the difference between padding and margin?" (Answer: padding is space inside the box; margin is space outside it. Take 1–2 answers.)

0:30 · Activity — Style your page (20 min)

Activity — Make It Yours (≈20 min). Students reopen the page they built in Session 19 (or paste the starter page) into a Pen and add CSS. Their styled page must include at least four of these:

1. A text colour for the heading (color).
2. A background colour for the page (background-color).
3. A font for the paragraphs (font-family).
4. Centered text somewhere (text-align: center;).
5. Some spacing (padding or margin).

Circulate (or invite screen-shares) and help fix missing braces and semicolons.

Debrief: "Same HTML as last week, but now it looks like yours. That's the power of CSS."

0:50 · Check for understanding (7 min)

Ask these aloud or drop them in the chat. Answer key (for you):

1. What is the job of CSS? → It controls how the page looks (colours, fonts, spacing) — the "paint," not the bricks.
2. What is missing here: h1 { color: red } → The semicolon after red: h1 { color: red; }.
3. What's the difference between padding and margin? → padding is space inside a box; margin is space outside it, pushing other things away.

0:57 · Wrap-up + homework (3 min)

• Ask one student to name their favourite CSS change they made today and the property that did it.
• Homework — Plan Your Big Page: on paper, plan a multi-section page about yourself or a topic you love for Session 21 — think of 3 sections (e.g. "About Me," "My Favourites," "My Goals"), each with a heading and a couple of lines. Pick your colours too. Bring it next time — you'll build and present it.

Teaching notes

• Correct this misconception: "CSS changes the words on the page." Reframe: CSS never changes what the words are (that's HTML) — it only changes how they look. Same text, new style.
• Fast finishers (extension): introduce the class idea so they can style just one special item. In the HTML, add class="special" to a paragraph, then style it:

.special {
  color: white;
  background-color: purple;
  padding: 10px;
}

Ask them to explain why the dot . is needed before special in the CSS (it means "the thing with this class"). Then challenge them to add a border:

.special {
  border: 3px solid gold;
}

• Low-tech fallback: if devices are limited, screen-share one Pen and take "style requests" from the class — students call out a colour or font and you type the rule, so everyone sees cause and effect. On paper, they can write CSS rules by hand for you to try.

Practice set

Assign in class or as homework. Answers are for you, after the arrow.

1. What do the letters CSS stand for, and what is it for? → Cascading Style Sheets — it controls how a web page looks.
2. Name the three parts of this rule: p { color: blue; } → Selector p, property color, value blue.
3. Write a CSS rule that makes all <h1> headings the colour orange. → h1 { color: orange; }
4. Write a rule that gives the whole page a skyblue background. → body { background-color: skyblue; }
5. A student wrote p { color: green } and nothing happened after they added more lines. What's likely wrong? → The semicolon is missing after green: p { color: green; }.
6. Which property adds space inside a box, and which adds space outside it? → padding is inside; margin is outside.

Going deeper (optional)

• Colours beyond names. Show that besides names like teal, colours can be written as hex codes like #ff69b4. Open CodePen's little colour swatch (click the tiny square next to a colour) and let students pick a shade and copy the code. Land the point: names are easy, but hex codes let you choose from millions of colours.
• Why it's called "cascading." Explain gently that if two rules disagree, the one written lower down usually wins. Show two p { color: ... } rules stacked and let students predict which colour appears. This previews the idea that order matters in CSS.

Common mistakes & fixes

• Mistake: forgetting the semicolon, e.g. color: red. → Fix: end every declaration with ; — color: red;. Say "one line, one semicolon."
• Mistake: dropping a curly brace, e.g. h1 { color: red;. → Fix: every rule needs an opening and closing brace: h1 { color: red; }.
• Mistake: British spelling, e.g. colour or centre. → Fix: CSS uses American spelling — color, text-align: center.
• Mistake: putting CSS in the HTML box (or HTML in the CSS box). → Fix: tags like <h1> go in the HTML box; rules like h1 { } go in the CSS box.
• Mistake: using a space in a property name, e.g. background color. → Fix: join the words with a dash: background-color.

Vocabulary

Resources

• CodePen — write CSS and watch the page change instantly (main tool).
• MDN — CSS first steps — friendly reference for more properties.
• W3Schools — CSS Colors — the full list of colour names to try.
• Coolors — generate pretty colour combos for the page.

Next session

Session 21 — Build & Share Your Site: students combine HTML and CSS into a fun multi-section page about themselves or a topic they love, then present it — the unit's build project.