A CSS rule is like a styling instruction sheet taped to a labeled box: "for every H1 you find, make it blue and set the size to 32px." One instruction sheet, applied automatically to every single element that matches the label.
CSS selects an HTML element and describes how it should look. A selector picks WHICH element(s) to style (like h1 for every <h1> tag on the page), and each declaration inside the curly braces sets one property to one value, always ending in a semicolon.
selector {
property: value;
property: value;
}h1 {
color: blue;
font-size: 32px;
}h1 is the selector - this rule applies to every <h1> on the page. Inside the braces, color: blue; makes the text blue, and font-size: 32px; makes it bigger - each declaration sets exactly one property, and both end in a semicolon.
p {
color: green;
text-align: center;
}The same pattern applies to any selector - here p targets every <p> (paragraph) on the page instead of headings. text-align: center; is a new property: it centers the text horizontally instead of leaving it against the left edge.
Mistake 1: forgetting the semicolon at the end of a declaration - color: blue (no semicolon) can make the NEXT declaration fail to apply too, since CSS uses the semicolon to know where one instruction ends and the next begins. Mistake 2: writing color = blue like Python instead of color: blue - CSS always uses a colon between property and value, never an equals sign. Mistake 3: putting quotes around a plain keyword value, like color: "blue"; - keywords such as blue, bold, or center are written bare, with no quotes at all; quotes are only for things like a font name that contains spaces.
In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Make the heading (h1) blue and set its font-size to 32px. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.
Try it free