General Syntax and Nomenclature

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 A screeshot of a text editor window displaying CSS syntax with
          syntax coloring enabled.

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.

User-contributed notes

ID:
#8
Contributed:
by karans
Date:
Sat, 02 Feb 2008 01:19:20 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

I agree as said in #4 that there should be a next link on each page that simply takes you to the next logical topic in a linear fashion while still providing the ability to jump as necessary.

ID:
#1
Contributed:
by leilacarlyle
Date:
Wed, 05 Dec 2007 19:53:12 GMT

Is there a reason for using such a complicated selector in an example so early on in this reference? Assuming that some near-beginners will be reading this, might a more straightforward selector (e.g. 'h2') serve the purpose and be less likely to confuse than 'h2+p.warning:first-line' ?

Related Products