← ACARA Digital Technologies Years 9–10

Anatomy of a CSS rule: selector, property and value

A CSS rule: a selector (p) picks elements, then { } hold declarations. Each declaration is property, colon, value, semicolon, so all paragraphs get blue text.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 26

Understanding Anatomy of a CSS rule: selector, property and value in ACARA Digital Technologies Years 9–10

What it does: The p selector has one pair of braces holding two property: value; declarations, so both styles apply to every paragraph. background-color is the property, the colon separates it from the value yellow, and the semicolon ends the declaration. The property is the name of the setting (font-size). The value, 20px, is what that setting is changed to. CSS comments use /* and */. The <!-- --> style is for HTML comments and does not work in CSS. Every declaration should end with a semicolon. The last one can sometimes work without it, but adding it avoids bugs when you add more declarations.

Common mistakes: A declaration needs a colon between the property and the value, not an equals sign. It should be text-align: center;. The colon between the property and the value is missing. It should be color: red;.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Anatomy of a CSS rule: selector, property and value to a class →

This module's key terms are also in a printable crossword (Modules 155–225) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which is a correctly written CSS rule?
p { color: blue; }p ( color = blue )
Matches
p { color blue; }
↓
The colon is missing between the property and the value. It should be color: blue;
Applying
Meanings
Term
p { color: blue; }
Meaning
A CSS rule: a selector (p) picks elements, then { } hold declarations. Each declaration is property, colon, value, semicolon, so all paragraphs get blue text.
Practice
/* Style the main heading */
Testing
Gaps
{ color: blue; }
Check Answer
Spots
3 font-size: 16px;
4 text-align = center;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Owl' badge — Wise Coder, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which is a correctly written CSS rule?
A. p ( color = blue )
B. p { color: blue; } ✓
A CSS rule uses curly braces { }, and each declaration is written as property: value; with a colon and a semicolon.
2. In the rule h1 { color: red; }, which part is the selector?
A. h1 ✓
B. color
The selector comes before the curly braces and picks which elements to style. Here it picks every h1. 'color' is the property.
3. In the declaration font-size: 20px; what is 20px?
A. The value ✓
B. The property
The property is the name of the setting (font-size). The value, 20px, is what that setting is changed to.
4. Which declaration is written correctly?
A. background-color: yellow; ✓
B. background-color = yellow;
CSS separates the property and value with a colon (:), not an equals sign.
5. What do the curly braces { } hold in a CSS rule?
A. The selector
B. The declarations ✓
The selector sits before the braces. Inside the { } is the declaration block with one or more property: value; pairs.

Match the Pairs

h1 { color: red; } → A CSS rule: the selector h1 picks every main heading, and the declaration inside the braces turns its text red.
/* make text bigger */ → A CSS comment: the browser ignores it, so it is a note for people reading the stylesheet.
One rule can hold several declarations, each ending with a semicolon inside the same curly braces. → p { color: blue; font-size: 18px; }
A declaration is a property, a colon, a value and a semicolon. → background-color: yellow;
p { color blue; } → The colon is missing between the property and the value. It should be color: blue;
p ( color: blue; ) → Round brackets are used instead of curly braces. The declaration block must sit inside { }.

Key Term

p { color: blue; }
A CSS rule: a selector (p) picks elements, then { } hold declarations. Each declaration is property, colon, value, semicolon, so all paragraphs get blue text.

Fill in the Blanks

1. p { color: blue; }
Hint: Type the selector that picks every paragraph element.
2. p { color: blue; }
Hint: Type the property name that changes the text colour.
3. p { color: blue; }
Hint: Type the punctuation that separates a property from its value.
4. h1 { color: red; font-size: 24px; }
Hint: Type the second property in this rule, which sets how big the text is.
5. /* Paragraph style */ p { color: blue; }
Hint: Type the symbols that open a CSS comment.

Spot the Error

Question 1
A p {
B color: blue;
C font-size: 16px;
D text-align = center;
E }
Line D — A declaration needs a colon between the property and the value, not an equals sign. It should be text-align: center;
Question 2
A h1 {
B color red;
C margin: 0;
D }
Line B — The colon between the property and the value is missing. It should be color: red;
Question 3
A h2 (
B color: green;
C margin: 10px;
D }
Line A — The declarations of a rule go inside curly braces { }, not round brackets. It should be h2 {
Question 4
A /* Style the links */
B a {
C color: purple:
D }
Line C — Each declaration must end with a semicolon, not a colon. It should be color: purple;
Question 5
A p {
B color: black;
C // tight spacing
D margin: 0;
E }
Line C — CSS comments use /* and */, not //. It should be /* tight spacing */

Student with a class code? Join your class →