CSS Syntax

A CSS rule has two parts: a selector and a declaration block.

css
selector {
  property: value;
  property: value;
}

The selector

The selector picks which HTML element to style.

css
h1 { color: red; }

h1 is the selector. It says: "find every <h1> on the page and style it."

The declaration block

The { } curly braces hold one or more declarations. Each declaration = a property and a value, separated by a colon and ended with a semicolon.

css
p {
  color: blue;
  font-size: 20px;
}

• color is the property (WHAT to change).
• blue is the value (HOW to change it).
• The semicolon separates declarations.

Property: value

Think of it like a recipe:

• Property = the ingredient you're adjusting (e.g., "color").
• Value = the amount (e.g., "red").

Declarations are read as "set the color to red", "set the font size to 20 pixels".

Drop the last semicolon?

You CAN skip the last semicolon before the closing brace, but it's a bad habit. Always end every declaration with a semicolon!

css
/* good */
p1 {
  color: red;
  font-size: 20px;
}

/* works but risky */
p1 {
  color: red;
  font-size: 20px
}

Multiple rule blocks

You can have many rules. Each one targets different elements:

css
h1 {
  color: green;
}
p {
  color: gray;
  line-height: 1.5;
}

TL;DR

• A rule = selector { property: value; }.
• Selector picks the element(s).
• property: value; is one declaration.
• Always end declarations with a semicolon.
• Many rules can live in the same file.