In this section, we’ll describe the building blocks of a CSS style sheet and the correct syntax for each part. We’ll also define the unavoidable jargon we’ll use throughout this reference. When everyone uses the same term for the same thing, communication is usually easier and less error prone.

CSS syntax is not rigid: whitespace can usually be added freely between tokens, and line breaks have no semantic value.

CSS is case insensitive in all matters under its control. However, some things lie outside the control of CSS and these may or may not be case sensitive, depending on external factors such as markup language and operating system.

Element type names, for instance, are case insensitive for HTML but case sensitive for XML (including XHTML served as XML). Font names, with the exception of the generic font family CSS keywords, may be case sensitive on some operating systems.

Disambiguating the Nomenclature

In order to name the various items that make up CSS syntax, let’s consider the example in Figure 1.

Figure 1. Sample CSS syntax

The example begins with a comment:

/* A sample style sheet */

The comment is followed by two statements. The first statement is an at-rule:

@import url(base.css);

The second statement is a rule set:

h2 {
  color: #666;
  font-weight: bold;
}

The rule set consists of a selector (the text before the left curly brace, {) and a declaration block (delimited with the curly braces, { … }). The block contains two declarations separated by semicolons:

  color: #666;
  font-weight: bold;

Each declaration includes a property name and a value, separated by a colon.