CSS Syntax

Every CSS rule follows the same basic recipe: you say what you want to style, then what you want it to look like. That's the whole idea behind CSS syntax. A CSS rule has two main parts: a selector, which points at the HTML you want to style (like every paragraph, or one specific button), and a declaration block, wrapped in curly braces, that lists the actual style changes as property-value pairs separated by semicolons. Once this pattern clicks, reading and writing CSS for a real project like cookiescursor.com becomes far less intimidating, since every single rule you'll ever write follows this same shape.

In this page:

Anatomy of a CSS Rule
Selectors and Declaration Blocks
Properties and Values
Multiple Declarations in One Rule
Grouping Selectors

Anatomy of a CSS Rule

A CSS rule always has two parts: a selector that says what to style, and a declaration block in curly braces that says how to style it. Together they form one complete rule. If either part is missing or the braces are mismatched, the browser will typically ignore the entire malformed rule.

Note: Read a CSS rule out loud as 'select this, then set these properties', it makes the structure much easier to remember.

Warning: A selector with no declaration block, or a declaration block with no selector, is not a valid CSS rule.

Example: Anatomy of a CSS Rule

css

<style>
p {
  color: blue;
}
</style>
<p>Selector "p" plus a declaration block "{ color: blue; }"</p>

Selectors and Declaration Blocks

The selector comes before the opening curly brace and identifies which elements the rule applies to. Everything between the curly braces is the declaration block, holding the actual styling instructions.

Note: Add a space between the selector and the opening curly brace, it's a small habit that keeps CSS easy to scan.

Warning: A typo in a selector, like misspelling a class name, means the rule quietly matches nothing instead of throwing an error.

Example: Selectors and Declaration Blocks

css

<style>
.highlight {
  background: yellow;
}
</style>
<p class="highlight">Selector before the brace, declarations inside</p>

Properties and Values

Inside a declaration block, each line is a property (what aspect you're changing, like color or padding) paired with a value (the setting you want, like red or 16px), separated by a colon.

Note: CSS has hundreds of properties, but you'll find yourself reaching for the same handful (color, background, margin, padding, font-size) constantly.

Warning: Not every value works with every property; a color property expects a color value, not a length like 10px.

Example: Properties and Values

css

<style>
p {
  color: red;
  padding: 16px;
}
</style>
<p>color: red and padding: 16px are property:value pairs</p>

Multiple Declarations in One Rule

A single selector can control many properties at once, simply by listing several declarations, each ended with a semicolon, inside the same declaration block. Forgetting a semicolon between declarations is a common source of bugs, since the browser may misread where one declaration ends and the next begins.

Note: Put each declaration on its own line once a rule has more than one or two properties, it keeps rules easy to read and edit later.

Warning: Forgetting a semicolon between declarations can cause the browser to misread where one declaration ends and the next begins.

Example: Multiple Declarations in One Rule

css

<style>
p {
  color: green;
  font-size: 18px;
  padding: 10px;
}
</style>
<p>Three declarations, each ended with a semicolon</p>

Grouping Selectors

When several different selectors need the exact same styling, you can group them together with commas instead of repeating the same declaration block over and over. This avoids the repetition and maintenance burden of copy-pasting the same block under several separate selectors.

Note: Grouping selectors keeps your CSS shorter and makes it obvious at a glance which elements share the same styling.

Warning: A comma between selectors means 'apply to all of these', while no comma (just a space) means something different: a descendant relationship.

Example: Grouping Selectors

css

<style>
h1, h2, h3 {
  color: navy;
}
</style>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Common Mistakes

Forgetting the semicolon at the end of a declaration, which can cause the next declaration to be ignored.
Mixing up the colon (between property and value) with the semicolon (between declarations).
Leaving off one of the curly braces, which breaks the entire rule and often the rules after it too.

Chapter Summary

A CSS rule is made of a selector and a declaration block wrapped in curly braces.
Each declaration inside the block is a property and a value, separated by a colon and ended with a semicolon.
Getting the punctuation right (colons, semicolons, braces) is essential, since CSS is strict about its syntax.

Browser Support

CSS syntax rules are part of the language standard and are interpreted identically by every modern browser.

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Introduction Next Lesson → CSS Selectors