CSS Syntax

Learn the anatomy of a CSS rule — selectors, declaration blocks, properties, values, and semicolons — well enough to read and write basic CSS confidently.

Every CSS rule you will ever write, no matter how complex the project gets, is built from the same small set of pieces. Once you understand this anatomy, reading unfamiliar CSS becomes far less intimidating — you're just looking at the same pattern repeated with different selectors, properties, and values.

The anatomy of a CSS rule

A CSS rule (sometimes called a 'rule set') has two main parts: a selector, which says WHICH element(s) the rule applies to, and a declaration block, wrapped in curly braces {}, which says WHAT styling to apply. Inside the declaration block, you write one or more declarations, each pairing a property (what aspect you're changing, like color or font-size) with a value (the specific setting, like red or 16px), separated by a colon and ended with a semicolon.

Selectors

The selector is everything before the opening curly brace. It targets the HTML element(s) the styles should apply to. Selectors can target by tag name (p, h1, div), by class (.card), by ID (#header), and in many more sophisticated ways you'll learn in Module 2.

Declaration blocks, properties, and values

Everything between { and } is the declaration block. Each line inside it (property: value;) is one declaration. A declaration block can hold as many declarations as you need — one, five, or fifty.

The property is a predefined keyword CSS understands (color, margin, font-size, display, etc.) — you can't invent your own standard properties, though CSS does support custom properties/variables, which you'll meet later. The value is what you're setting that property to, and valid values depend on which property you're using — color takes color values, font-size takes length values, display takes keyword values like block or flex.

Why the semicolon matters

Each declaration should end with a semicolon. Technically, the very last declaration in a block doesn't strictly require one (the closing } ends it), but omitting it is a common source of bugs when you later add another declaration below it and forget to add the missing semicolon first. Always terminate every declaration with a semicolon as a habit.

General form of a CSS rule

selector — targets which element(s) to style { } — wraps the declaration block property: value; — one declaration; a block can have many

selector {
    property: value;
    property: value;
}

Code Examples

A single-declaration rule. Selector: p (all paragraph elements). Property: color. Value: darkslategray. This turns the text of every <p> on the page that dark gray-green.

Four declarations inside one declaration block, all applied to every <h1>. Each line follows the same property: value; pattern.

Selectors separated by commas share the same declaration block, so you don't repeat yourself styling h1, h2, and h3 identically. CSS comments use /* ... */ and can span multiple lines.

p {
    color: darkslategray;
}

h1 {
    color: #222222;
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
}

/* Multiple selectors sharing one declaration block */
h1, h2, h3 {
    font-family: "Segoe UI", sans-serif;
    color: #1a1a1a;
}

/* This is a CSS comment — the browser ignores it */
p {
    line-height: 1.6;
}

Reading a CSS rule

Selector targets elements; the declaration block (in braces) lists property: value pairs describing how those elements should look.

selector
    |
    v
   p {
       color: darkslategray;
       |      |
    property  value
   }
    ^
    |
declaration block

Important Rules

A rule = a selector + a declaration block wrapped in { }.

A declaration = property: value; and every declaration should end with a semicolon.

Multiple declarations can live in one block; multiple selectors can share one block using commas.

Comments use /* ... */ and are ignored by the browser.

Reading real stylesheets

Open the browser DevTools on any website and inspect an element's 'Styles' panel — you'll see exactly this selector { property: value; } pattern repeated dozens or hundreds of times. Learning to read it fluently is one of the fastest ways to learn CSS by example.

p { color red } p { color: red; } Missing the colon between property and value, and the semicolon after the value, means the browser can't parse this declaration and will silently ignore it.

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

Forgetting the semicolon after red causes the parser to read red font-size: 18px as one broken value, invalidating the color declaration.

[Identify the Error] What is wrong with this CSS rule? h2 { color: teal font-weight: bold; } A. The selector h2 is invalid B. The declaration block is missing curly braces C. There is a missing semicolon after 'teal', which breaks the parsing of both declarations D. font-weight is not a real CSS property

C. There is a missing semicolon after 'teal', which breaks the parsing of both declarations — Without a semicolon after teal, the parser tries to read teal font-weight: bold as a single (invalid) value for color, breaking both declarations.

Write a CSS rule that selects all <button> elements and sets their background-color to seagreen and their color (text color) to white.

button { background-color: seagreen; color: white; } One selector, one declaration block, two declarations.