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.
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