LESSON 3

CSS Syntax

Learning objective: Read and write CSS rules with correct syntax.

Understand

Every CSS rule follows the same simple pattern.

A rule has a selector (what to style) and a declaration block in { }. Each declaration is a property: value; pair. Missing a semicolon or brace is the most common beginner bug.

Analogy: A rule is like an instruction: 'for these elements, set these properties to these values.'

See It in Action

Anatomy of a rule:

h1 {
  color: teal;
  font-size: 32px;
}
How it works: h1 is the selector; inside the braces are two declarations, each a property and value ending with a semicolon.

Try It Yourself

  1. Write a rule with two declarations.
  2. Remove a semicolon and see what breaks.
  3. Fix it and confirm both styles apply.

Quick Quiz

What ends each CSS declaration?

Challenge

Write a rule that changes the color and size of all <h2> elements.

Success condition: Your rule applies both a color and a size with valid syntax.