CSS Syntax: Rules, Selectors, Declarations and Comments

CSS has a small, regular syntax. Once you can read one rule, you can read any stylesheet.

Rule sets#

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

• Selector (p): which elements the rule applies to.
• Declaration block: everything between { and }.
• Declaration: a property: value; pair.
• The colon separates property and value; the semicolon ends each declaration.

The semicolon after the last declaration is optional, but always write it, so adding another line later cannot break the rule.

Whitespace and line breaks do not matter. These are identical:

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

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

The second style is easier to read and is what most teams use.

Grouping selectors#

To give several selectors the same styles, separate them with commas:

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #1d3b4f;
}

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Shorthand properties#

Some properties set several related properties at once:

/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Shorthand: top/bottom 10px, left/right 20px */
margin: 10px 20px;

Common shorthands include margin, padding, border, font, background, flex and grid-template. A shorthand resets any sub-property you leave out to its default value, which can surprise you if a longhand was set earlier.

Comments#

CSS comments start with /* and end with */. They can span lines:

/* Site colours: change these to re-theme */
a { color: #2f5fe0; }

/*
  Old banner styles, kept for reference
  .banner { background: yellow; }
*/

There is no single-line // comment in CSS. Using // breaks the rule that follows it.

Case#

Property names, values like red and selectors for HTML elements are case-insensitive, but class names and ids are case-sensitive: .Card does not match class="card". Write everything in lowercase.

When CSS has an error#

CSS does not stop at an error. The browser skips what it cannot understand and carries on:

p {
  color: green;
  font-size: 20pxx;   /* invalid value: this one declaration is ignored */
  font-weight: bold;
}

<p>Green and bold, but the font size is the default.</p>

This makes CSS robust, and it is why you can use new features safely: browsers that do not understand a declaration simply ignore it. But it also means typos fail silently. When a style does not apply, check the developer tools: the Styles panel crosses out or flags declarations the browser rejected.

Practice#

/* Sub-headings */
h2, h3 {
  color: darkslateblue;
}

/* Body text */
p {
  line-height: 1.5;
  margin: 0 8px;
}

<h2>Section</h2>
<p>A paragraph with tighter vertical spacing.</p>
<h3>Subsection</h3>
<p>Another paragraph.</p>

Key takeaway#