CSS Colors, Fonts and Boxes: A Playful Guide for Kids

HTML gives a page its structure. CSS gives it style. If a web page is a house, HTML is the walls and rooms, and CSS is the paint, the furniture and the curtains. If you need a refresher, start with CSS for kids: make your page pretty. This article goes one level deeper.

How CSS rules look

A CSS rule has three parts: what to style, which property, and what value.

h1 {
  color: teal;
  font-size: 40px;
}

• h1 is the selector: it picks which elements to style.
• color and font-size are properties.
• teal and 40px are values.

Each line ends with a semicolon, and the rules sit inside curly brackets.

Colours

You can use colour names such as tomato, gold or skyblue. For exact shades there are codes like #ff6347. Encourage your child to experiment: change one colour and refresh. That tight loop of change, look, change is the best way to learn.

body {
  background-color: lightyellow;
}
p {
  color: darkslateblue;
}

One thing worth teaching early is contrast. Pale yellow text on a white background is hard to read, and that matters to everybody, especially people with vision difficulties. A good question for kids is, "Could someone read this from across the room?"

Fonts

p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

The list in font-family is a backup plan: if the first font is missing on someone's computer, the browser tries the next.

The box model

This is the idea that unlocks layout. Every element is a box with four layers, from inside to outside:

1. Content: the text or picture itself.
2. Padding: breathing room between the content and the border.
3. Border: a line around the padding.
4. Margin: empty space outside the border, pushing other boxes away.

.card {
  background-color: white;
  padding: 20px;
  border: 3px solid purple;
  margin: 30px;
}

An easy way to explain it: a photo in a frame, hung on a wall. The photo is the content, the white mat inside the frame is padding, the frame is the border, and the gap to the next photo is the margin.

Classes: style some things, not everything

The .card above is a class. You give an element a class in HTML, then style just those elements.

<div class="card">
  <p>I am a styled card.</p>
</div>

You can reuse the class on as many elements as you like. That idea, name it once and use it everywhere, will feel familiar if your child has learned about functions.

Try these challenges

1. Change the background and text colours of a page, and check they are easy to read.
2. Make a heading centred in a different font.
3. Build three "cards" with the same class, each with padding, a border and margin.
4. Make a card look different when the mouse hovers over it, using .card:hover.

Children usually love CSS because the results are instant and personal. It pairs well with a project like a personal web page, and the CSS course offers guided practice.