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

Syntax

css

selector {
  property: value;
  property: value;
}

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>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Introduction Next Lesson → CSS Selectors