Year 4 Primary Maths Topics: A Complete Chapter Guide
Math Education8 min read
Coding Education
5 min read
What Is CSS: Definition, How It Works, and Examples
Published: 12.08.2026·Updated: 12.08.2026
Bayu Nugraha
Children's Coding Specialist
CSS is the language that controls how a web page looks: colours, font sizes, spacing between elements, and how everything is arranged on screen.
Table of Contents
Its full name is Cascading Style Sheets. The usual analogy: if HTML is the frame of a house, CSS is the paint, the tiles, and the furniture. A house without paint is still liveable, but nobody enjoys looking at it.
CSS vs HTML
| HTML | CSS | |
|---|---|---|
| Job | Defines what the content is | Defines what it looks like |
| Example | This is a heading, this a paragraph, this an image | Headings are blue, 32 pixels, centred |
| If removed | A completely blank page | Page still readable, but plain like a black-and-white document |
Neither is a programming language in the strict sense, because neither contains logic such as loops or conditions. Making a page move and react needs a third language, JavaScript.
How CSS Works
CSS works through rules with two parts: a selector and a list of properties. The selector says which elements the rule applies to, and the properties describe how those elements should appear.
One rule can affect many elements at once. Stating that all headings are blue takes a single line, and every heading across the whole site changes. That is its greatest strength: restyling hundreds of pages from one file.
The word cascading in the name means layered. When two rules conflict, an order decides the winner - generally the more specific rule, and the one written later.
A Simple CSS Example
The rule that makes every main heading blue and centred is written roughly like this: the selector is h1, then inside curly braces there are two properties, color set to blue and text-align set to center.
The properties children use most when starting out number only five: color for text colour, background-color for the background, font-size for text size, margin for space outside an element, and padding for space inside it. Those five are enough to make a page look tidy.
Why It Matters for Kids
CSS is usually the moment coding stops feeling abstract. A child types one line, hits save, and the colour on screen changes immediately. Feedback that fast is rare in other subjects, and it is what hooks many children.
There is a second benefit that often goes unnoticed. CSS is the first meeting point between logic and visual taste. The child has to decide which colours look right, how much spacing feels comfortable, and what arrangement reads easily. That skill carries straight over into graphic design, and often becomes the bridge for children more drawn to drawing than to numbers.
In the Algonova coding course, HTML and CSS are taught through a personal-page project the child can show the family. Want to see where they are? Join a free coding class.
