CSS Syntax

Every CSS rule follows the same shape. Once you learn this shape, you can read any CSS in the world, because every rule — from the simplest colour change to a full page layout — is built from the same pieces.

Diagram — see how it fits together

The parts of a rule

A rule has two parts. First comes the selector — it says which part of the page to style. Then comes the declaration block, inside curly braces { } — it says how that part should look.

Inside the braces are declarations. Each declaration has a property (what to change, like color) and a value (what to change it to, like red). The property and the value are separated by a colon :, and each declaration ends with a semicolon ;.

Syntax — the shape of a rule

selector {
  property: value;
  property: value;
}

Here is a real rule, with each part labelled:

p {
  color: darkblue;
  font-size: 18px;
}

The selector is p — every paragraph on the page. The first declaration, color: darkblue;, makes the text dark blue. The second declaration, font-size: 18px;, makes the text 18 pixels tall. The semicolon after each declaration tells the browser "this instruction is finished, the next one starts here".

Comments in CSS

Sometimes you want to leave a note for yourself in the code — a note the browser must ignore. CSS comments start with /* and end with */. Anything between them is ignored, even if it spans many lines.

/* This rule styles the main heading */
h1 {
  color: green; /* green means "fresh" on our site */
}

Comments are free: they cost nothing, and they save future-you a lot of confusion. Use them to explain why a rule exists, not what it does — the code already says what it does.

Common mistakes

• Forgetting the colon between property and value — color red; does nothing. It must be color: red;.
• Forgetting the semicolon — the next declaration gets glued to the previous one and both break.
• Forgetting a closing brace } — every rule after it stops working, because the browser thinks it is still inside the first rule.
• Using = instead of : — CSS uses a colon, not an equals sign. color = red is not CSS.
• Writing property names with capital letters — Color and color are different to CSS. Always use lowercase.

Remember

• A rule is selector { property: value; } — selector picks, declarations style.
• Colon separates property and value; semicolon ends each declaration.
• Curly braces { } hold the declaration block — every opening brace needs a closing one.
• Comments look like /* this */ and are ignored by the browser.
• Spacing and line breaks do not change the meaning — use them to make your code readable.

Example explained

• h1 { color: darkgreen; } — one rule, one declaration. Every h1 on the page becomes dark green.
• p { color: #333; font-size: 18px; line-height: 1.6; } — one rule, three declarations. All paragraphs get dark grey text, 18 pixels tall, with generous space between the lines.
• .highlight { background-color: yellow; } — the dot means "class". Only elements with class="highlight" get the yellow background.
• #special { font-weight: bold; } — the hash means "id". Only the one element with id="special" becomes bold.
• /* Welcome message */ — a comment. The browser ignores it completely; it is there only for the human reading the code.