CSS rule syntax

Code pattern

Jump to a topic

See every item in the sequence

Definition

selector { property: value; } with comments in /* */. h1 targets an element, #welcome targets an id, .red-text targets a class.

Example

.red-text { color: red; }

Found in: course specifications.

Where you'll use it in the test

Syllabus area: Code patterns.

Question types it can appear in

Code reading: Read CSS (2025 Q7)
Multiple choice: Pick the option that matches the definition or example.

Where it has appeared in the paper

Programming for the Web (Part A, B). Part letters follow each paper’s own layout.

How to use it

A model sentence

General advice, built from the definition and example above

Code pattern: “selector { property: value; } with comments in /* */.” Then apply it: .red-text { color: red; }

In a short answer, give the definition in your own words first, then tie it to the situation in the question. Do not copy the example above unless it fits the scenario.

Command words used with it

From the linked past questions

Identify: Recognise and name. (2025 HSC Q7 (1 mark): CSS code fragment, Sample exam Q16a (1 mark): CSS (id v class))

Official worked answer

Sample exam Q16a (1 mark): CSS (id v class) (1 mark): official criteria and sample answer

Criteria

1: Identifies the correct answer.

Sample answer

The id qe_item has not been correctly referenced. (The HTML uses id="qe_item" but the CSS selector is .qe_item, which targets a CLASS. An id selector is #qe_item.)

Open the question page

Go deeper

Flashcard: CSS rule syntax in Code Patterns: Pseudocode, Python, SQL, CSS (Years 11 and 12) · study that set
Memorise: SQL: HSC syntax and must-know queries
Full term page: every question, note and marking comment for CSS rule syntax

Check yourself

Write or say the “CSS rule syntax” pattern from memory: the syntax and what it does.

Reveal the answer