CSS ยท Chapter 2 of 44

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element to style, and the block contains one or more declarations separated by semicolons.

Each declaration includes a property and a value, separated by a colon.

Syntax
selector {
  property: value;
}

Rule structure

selector { property: value; } โ€” the selector chooses elements, and declarations inside braces set their styles.

Multiple declarations

You can add as many property:value; pairs as needed inside one rule, each ending with a semicolon.

Example 1 (css)
p {
  color: red;
  font-size: 16px;
}
Output
All paragraphs turn red with 16px text

Two declarations style the color and font size of all <p> elements.

Key points

  • A rule has a selector and a declaration block.
  • Declarations are property:value; pairs.
  • Each declaration ends with a semicolon.
  • Braces {} wrap the declaration block.
๐Ÿ’ก Note: Missing a semicolon can break the next declaration in the block.

๐Ÿ“ Quick Quiz

1. What two parts make up a CSS rule?

2. What separates property and value?

3. What ends each declaration?