CSS Syntax

Rules, declarations, grouping selectors and comments.

Lesson 2 of 49Beginner12 min read

Every piece of CSS you'll ever write follows one simple pattern. Once you can read that pattern, any stylesheet, even one thousands of lines long, becomes a list of small instructions you can understand one at a time.

CSS syntax is also strict about punctuation in a way that HTML isn't. A missing colon or semicolon won't produce an error message; the browser just quietly ignores part of your code. Learning the rules now saves a lot of puzzled debugging later.

The parts of a CSS rule

CSS
p {
  color: navy;
  line-height: 1.6;
}
PartExampleJob
SelectorpWhich elements to style
Declaration block{ … }Holds the instructions
Declarationcolor: navy;One instruction
PropertycolorWhat to change
ValuenavyWhat to change it to

A stylesheet is a list of these rules, one after another. The browser reads them from top to bottom and applies each one to every element its selector matches.

CSS punctuation rules

  • Curly braces { } wrap the declarations.
  • A colon : sits between the property and the value.
  • A semicolon ; ends every declaration. It's optional after the last one, but always add it, because it prevents bugs when you add another line later.
  • Spaces and line breaks don't matter to the browser. One line or ten works the same, so format your code for people: one declaration per line, indented by two spaces.

Property names are always lowercase and use hyphens between words, such as font-size and background-color.

Grouping selectors with commas

Give several selectors the same styles by separating them with commas:

CSS
h1, h2, h3 {
  font-family: Georgia, serif;
}

This is shorter than writing three identical rules, and if you later change the font, you only change it in one place.

Writing CSS comments

CSS comments start with /* and end with */, and they can span several lines:

CSS
/* Main navigation */
nav { background: #222; }

There are no // comments in CSS. Writing // note doesn't create a comment; it breaks the rule that follows.

How the browser handles errors

CSS is forgiving by design. When the browser meets something it doesn't understand, such as a misspelled property, an invalid value or a missing colon, it skips only that declaration and carries on with the rest of the rule. A whole rule is only dropped when its selector is invalid. This is why one typo rarely breaks a whole page, but it's also why CSS bugs can be hard to spot: there's no error message, the style simply doesn't appear.

When something doesn't work, open your browser's DevTools, select the element and look at the Styles panel. Declarations the browser couldn't read are shown crossed out with a small warning icon, which points you straight to the typo. Checking there first saves a lot of guessing.

Shorthand and longhand properties

Many properties come in two forms. Longhand properties set one thing each, such as margin-top or font-weight. Shorthand properties set several at once: margin: 10px 20px sets all four margins, and font: italic 700 18px/1.5 Georgia, serif sets style, weight, size, line height and family in one line. Shorthands are quicker to write, but any value you leave out is reset to its default. If you only want to change one part, use the longhand.

CSS Syntax Syntax

CSS rule pattern

/* comment */
selector, another-selector {
  property: value;
  property: value;
}

CSS Syntax Summary

  • A CSS rule is a selector followed by declarations inside curly braces.
  • Each declaration is property: value;.
  • Always end declarations with a semicolon.
  • Separate selectors with commas to give them the same styles.
  • CSS comments use /* */, and invalid code is skipped without an error.

CSS Syntax Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Reading a stylesheet

/* Headings share a font */
h1, h2 {
  font-family: Georgia, serif;
  color: #1e3a8a;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.done {
  color: green;
  text-decoration: line-through;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1A comment explaining the next rule.
  2. Line 2Grouped selector: the rule applies to both h1 and h2.
  3. Lines 3 to 4Two declarations, each ending with a semicolon.
  4. Lines 7 to 10Every paragraph gets bigger text and roomier lines.
  5. Lines 12 to 15Only the paragraph with class="done" is green and crossed out.
Example 2

One mistake, one silent failure

The second declaration has a typo: colr. Run it. The browser ignores that line but still applies the others. Fix the typo and run again.

.tag {
  background: #ffd23f;
  colr: #15161b;
  padding: 4px 10px;
  font-weight: bold;
  display: inline-block;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Works.
  2. Line 3Typo → ignored, silently.
  3. Lines 4 to 6Still work, because the browser just skips the bad line.

Common CSS Syntax Mistakes

Missing semicolon

Don't
h1 {
  color: red
  font-size: 30px;
}
Do
h1 {
  color: red;
  font-size: 30px;
}

Without the semicolon, the browser reads red font-size: 30px as one broken value and ignores both lines.

Using // comments

Don't
// make the button green
.btn { background: green; }
Do
/* make the button green */
.btn { background: green; }

// isn't a comment in CSS, so the browser treats it as part of a broken selector and may skip the whole rule.

CSS Syntax in Real Projects

Formatting tools

In real projects, tools like Prettier format CSS automatically, with consistent indentation, one declaration per line and semicolons everywhere. The playground on this site has a Format button that does a simple version of the same thing.

CSS Syntax Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the rule.

.price 
  color crimson
}
Multiple choiceeasy

How do you write a comment in CSS?

Multiple choicemedium

What does h1, p { color: gray; } do?

Fix the bugmedium

Three things are wrong: a // comment, a missing semicolon and a missing closing brace. Fix them so the badge is purple with white text.

// badge styles
.badge {
  background: purple
  color: white;
  padding: 4px 8px;
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The badge is purple
  • The text is white
  • The padding works

CSS Syntax Quiz

3 questions to check what you learned.

  1. What ends each CSS declaration?

    • A comma
    • A semicolon
    • A period
    • A colon

  2. What happens when CSS contains a property the browser doesn't recognise?

    • The page crashes
    • That declaration is ignored and the rest still works
    • All the CSS stops working
    • An error pops up for the user

  3. In a { text-decoration: none; }, what is text-decoration?

    • Property
    • Selector
    • Value
    • Declaration block

CSS Syntax Challenge

Write three rules

Style the page with:

  1. One grouped rule making both h1 and h2 the colour #7c3aed
  2. A rule giving p a line-height of 1.8
  3. A comment above the first rule
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • h1 is #7c3aed
  • h2 is #7c3aed
  • Paragraph line-height is 1.8

Related CSS topics

01CSS IntroductionWhat CSS does, how it connects to HTML, and your first styles.04SelectorsTarget exactly the elements you want by tag, class, id, family or attribute.03Adding CSS to HTMLInline styles, style tags and external stylesheets, and which one to use.
Esc
↑↓ to navigateEnter to open