CSS Syntax

CSS Syntax

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

selector {
  property: value;
  property: value;
}

The selector

The selector picks which HTML element to style.

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.

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!

/* 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:

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.