CSS syntax: rules, selectors, properties and values

Every stylesheet is a list of rules. Once you can read one rule, you can read any CSS file. This lesson names the parts and shows you how the browser reacts when you get one wrong.

Anatomy of a rule

p {
    color: #333333;
    line-height: 1.6;
}

A rule is also called a ruleset. The selector picks elements; the declarations say what to do to them.

Punctuation that matters

• A colon : separates the property from the value.
• A semicolon ; ends each declaration.
• Curly braces { } wrap the declarations.

The semicolon after the last declaration is optional, but always add it. If you later add another line below, a missing semicolon breaks it.

Whitespace and formatting

CSS ignores extra spaces and line breaks between parts of a rule. These two rules are identical to the browser:

h1 { color: navy; margin-bottom: 0.5em; }

h1 {
    color: navy;
    margin-bottom: 0.5em;
}

Use the second style in real projects. One declaration per line is easier to read and produces cleaner diffs in version control.

Spaces inside values can matter. margin: 1rem 2rem sets two values; 1 rem (with a space) is invalid because a number and its unit must touch.

Values come in many types

Each property accepts particular kinds of values:

.notice {
    color: rebeccapurple;          /* keyword */
    border: 2px solid #cc0000;     /* several values in one */
    padding: 1rem;                 /* length with a unit */
    line-height: 1.5;              /* plain number */
    width: 50%;                    /* percentage */
    font-family: "Open Sans", sans-serif; /* comma-separated list */
}

Some properties are shorthands that set several others at once. border: 2px solid #cc0000 sets border-width, border-style and border-color together. You will meet many shorthands in this course.

Comments

Comments start with /* and end with */. The browser ignores everything between:

/* Site header */
.site-header {
    background-color: #102a43;
    /* padding: 2rem; */
    padding: 1rem;
}

/*
  Comments can span
  several lines.
*/

Use comments to explain why, not what. /* Matches the logo height */ is useful. /* Set colour to red */ is noise.

What happens when CSS is wrong

Browsers do not stop at errors. They skip the part they cannot understand and carry on. This is deliberate: it lets old browsers ignore new features without breaking the page.

p {
    colr: red;          /* unknown property: ignored */
    font-size: 18 px;   /* invalid value: ignored */
    line-height: 1.6;   /* still applied */
}

Only the bad declarations are dropped. The rest of the rule still works.

Some mistakes have a bigger blast radius:

h1 {
    color: navy
    font-size: 2rem;
}

The missing semicolon makes the browser read navy font-size: 2rem as one value for color. That value is invalid, so both lines are lost. A missing closing brace is worse still: everything after it may be swallowed into the broken rule.

Inspecting CSS in DevTools

Your browser's developer tools are the most important CSS tool you have. Open them with F12, or right-click an element and choose Inspect.

1. The Elements panel (called Inspector in Firefox) shows the HTML. Click an element to select it.
2. The Styles pane beside it lists every rule that applies to that element, with the file and line number.
3. Declarations that lost to another rule are shown crossed out.
4. Invalid declarations are crossed out and marked with a warning icon. Hover the icon to see why.
5. Click any value to edit it live. Tick and untick the checkbox next to a declaration to switch it off and on.

The Computed tab shows the final value of every property after all rules are combined. When you are confused about why something looks the way it does, check Computed first.

Validating your CSS

The free W3C CSS Validator checks a stylesheet and lists syntax errors with line numbers. Code editors such as VS Code also underline many errors as you type. Use both while you learn.

Practice: find the bugs

This stylesheet has four errors. Try to spot them before reading the answer.

// Main heading
h1 {
    color: #0b5394
    font-size: 2.5rem;
}

p {
    line-height 1.6;
    margin-bottom: 1 rem;
}

Answer:

1. // Main heading is not a CSS comment. Use /* Main heading */.
2. The color declaration is missing its semicolon, so font-size is lost too.
3. line-height 1.6 is missing the colon.
4. 1 rem has a space between the number and the unit.

The corrected version:

/* Main heading */
h1 {
    color: #0b5394;
    font-size: 2.5rem;
}

p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

Summary

• A rule is a selector plus a declaration block; each declaration is property: value;.
• Always end declarations with a semicolon and keep one per line.
• Comments use /* ... */ only.
• Browsers skip invalid declarations and keep going, so errors fail silently.
• DevTools shows which rules apply, crosses out losing or invalid ones, and lets you edit live.