CSS for Kids: Make Your Web Page Look Amazing

HTML puts things on a page. CSS decides how they look: colours, fonts, spacing and layout. If HTML is the skeleton, CSS is the clothes. This guide shows how to start.

Where CSS goes

The simplest way is to put it inside a <style> tag in the <head> of your HTML page:

<head>
  <title>My Page</title>
  <style>
    h1 {
      color: purple;
    }
  </style>
</head>

This turns every <h1> heading purple.

The pattern

Every CSS rule has the same shape:

selector {
  property: value;
}

• The selector says what to style (h1, p, body).
• The property says which feature (color, font-size).
• The value says how (purple, 24px).
• Each line ends with a semicolon.

Colours and backgrounds

body {
  background-color: lightyellow;
}

h1 {
  color: darkgreen;
}

You can use colour names, or codes like #ff6600. Ask your child to experiment and see what looks good.

Fonts and text

p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

line-height adds space between lines and makes text easier to read.

Spacing: margin and padding

Two ideas confuse beginners, so it helps to picture a framed photo:

• Padding is the space between the photo and the inside of the frame.
• Margin is the space around the outside of the frame.

.card {
  padding: 20px;
  margin: 10px;
  border: 2px solid black;
}

Classes: styling some things but not others

To style one particular element, give it a class in HTML and use a dot in CSS:

<p class="warning">Be careful!</p>

.warning {
  color: red;
  font-weight: bold;
}

Only elements with class="warning" will change.

Rounded corners and shadows

.card {
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 6px gray;
}

Small touches like these make a page look polished.

A challenge

Take the page from HTML for kids and:

1. Change the background colour.
2. Give the title a new colour and font size.
3. Add a card around the list with padding and a rounded border.

Common mistakes

• Forgetting a semicolon between lines.
• Misspelling color (CSS uses American spelling).
• Using a class in CSS but forgetting class="..." in the HTML.

Next steps

When your child is ready to make a page respond to clicks, try JavaScript for kids. You can also learn CSS step by step in the free CSS course.