CSS rule structure

Learn selector, declaration, property and value concepts.

The anatomy of a style block

Every CSS style block has three parts: a selector, one or more declarations inside curly braces, and a semicolon after each declaration. Example: body { color: #333; }.

The selector says which element to style; the declaration says what to change. This structure is the basic brick that all CSS is built from.

The selector

The selector is the part to the left of the curly brace. It tells which HTML element to style. body, h1, p are all type selectors; they write the tag name bare.

We will see selectors for classes and ids later; in this lesson we start with type selectors only. For now: write the selector, then open the curly brace.

Declaration, property, value

Inside the curly braces, each line is a declaration. A declaration has two parts: the property on the left, the value on the right, with a colon between. Example: color: navy.

A semicolon ends the declaration. To add a second one in the same block, write it on the next line: color: navy; font-size: 18px;.

Exercise Write an h1 block with two declarations

Write an h1 block. Inside it, add two declarations: color: darkblue and font-size: 32px. End each declaration with a semicolon.

Show example solution

/* add the h1 block */
h1 {
  color: darkblue;
  font-size: 32px;
}

Multiple declarations and the semicolon

You can write as many declarations as you like in one block. Putting each on its own line, indented by two spaces, makes the code easy to read. The last declaration's semicolon is optional but recommended.

Forgetting the semicolon is the most common beginner mistake. When a declaration ends, put a ; before moving on.

Test yourself

Write the paragraph selector

____ {
  color: #333;
  line-height: 1.5;
}

Show answer

p {
  color: #333;
  line-height: 1.5;
}

In the declaration color: navy, which part is the value?
```
h1 {
  color: navy;
}
```
- color
- h1
- navy
- the colon
Show answer

navy — Correct. 'navy' is the value; it is the name of the color.
Match each part to its meaning

Selector

Which element to style
Declaration

property: value pair
Property

what to change
Value

the new value itself

Next lesson: Comments and whitespace

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies