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