CSS rules: selector, property, value — HTML and CSS for kids

Code tip

Colon in the middle, semicolon at the end — “each declaration is property: value;”

1. A rule is: selector { property: value; property: value; }
2. The property is before the colon, the value after it; a semicolon ends each declaration.
3. Count the property: value; lines to count the declarations.

Use it for: Writing and reading CSS, and finding typing mistakes in a style sheet.

Worked example: ✍️ How many declarations (property: value pairs) are in this rule?
body {
  background-color: yellow;
  margin: 10px;
  border: 2px solid;
} → 3

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

🏁 Lesson 12 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the ✍️ CSS Rule Writer badge when you pass — and a certificate when you finish all 10 lessons of Part 2 · CSS. You can still take the test without signing in.

🖨️ CSS Worksheet: CSS Rules and Syntax

• Worksheet set 1 (PDF)
• Worksheet set 2 (PDF)
• Worksheet set 3 (PDF)