CSS Syntax

You already know CSS styles HTML. This session zooms into the grammar of a rule so you can read and write styles without guessing where braces, colons, and semicolons belong.

What is CSS syntax?

CSS syntax is the fixed pattern used to write a style rule. Almost every everyday rule follows the same shape: choose what to style (the selector), open a declaration block with {, list one or more declarations, then close with }. Each declaration pairs a property with a value.

Anatomy of a CSS rule

Break a rule into named parts. Once you can label each piece, debugging typos becomes much easier.

A labeled rule

Here is a minimal rule with every major piece visible. Later sessions deepen selectors; here the goal is correct structure.

Read it left to right

• p — selector (every paragraph)
• { … } — declaration block
• color — property
• : — separates property from value
• teal — value
• ; — ends the declaration
  Whitespace and line breaks are flexible. You could write p{color:teal;} on one line; browsers treat it the same. Readable multi-line form is preferred for learning and teamwork.

Several declarations in one block

One rule can set many properties for the same selector. Put each declaration on its own line and end it with a semicolon.

Why this works

• .note is a class selector (you will practice classes more later)
• Four declarations share one declaration block
• The browser applies all of them to elements with class="note"
• A missing semicolon between two declarations can make the next property fail to apply

Grouping selectors

When several selectors need the same styles, list them separated by commas. One declaration block serves all of them.

When to group

Grouping avoids copy-paste when headings (or other elements) should share look-and-feel. If one selector needs a unique style later, give it its own rule instead of overloading the group.

Keep this short mental list while you write:

• Curly braces wrap the declaration block
• Colon sits between property and value
• Semicolon ends each declaration (required before the next one; good habit even on the last)
• Commas separate grouped selectors — not properties
• Property names and most keyword values are case-insensitive, but write them in lowercase by convention

Try it yourself

1. Create syntax.html with a paragraph: <p class="note">Syntax practice</p> and a <style> block in the head.
2. Add the .note multi-declaration rule from this session.
3. Change background-color to #fef3c7, save, and refresh.
4. Add a fifth declaration: font-size: 1.125rem; inside the same block, save, and refresh again.
5. Confirm both the background and the font size update. If not, check braces and semicolons.

Common mistakes

• Writing color teal without a colon — the browser cannot parse the declaration
• Forgetting { or } so declarations sit outside a block and are ignored
• Omitting the semicolon between two declarations so the second property never applies
• Using a comma between property and value (color, teal) instead of a colon
• Putting a property on its own line with no selector or braces — that is not a complete rule

Summary

• CSS syntax = selector + declaration block { } filled with declarations
• A declaration is property: value;
• One block can hold many declarations for the same selector
• Commas group selectors that share styles
• Careful braces, colons, and semicolons prevent silent failures
• Practice by editing values and adding declarations, then refreshing