The CSS syntax

A CSS document (a style sheet) consists of a set of style rules. Each style rule starts with a selector and is followed by a declaration block enclosed by curly braces. The selector defines a pattern, and the declarations are applied to the objects that match the pattern.

The basic example below shows how to apply the color red to all emphasis elements in the HTML document.

em { color : red ; }

where em is the selector, and “ color : red ; ” is a declaration.

It is possible to group several rules with the same declarations. Use a comma “,” to separate the selectors. For example:

em, b { color : red ; }

Selector

The W3C states that “A selector represents a structure. This structure can be understood for instance as a condition that determines which elements in the document tree are matched by this selector, or as a flat description of the HTML or XML fragment corresponding to that structure.”

Examples of selectors:

P.footer

TABLE#bigtable > TR

TABLE#bigtable TD

node

node[x="2"]

node:selected

node#subgraph1 > #id2

A selector is composed of one or more simple selectors.

Examples of simple selectors:

P.footer

TABLE#bigtable

node

node[x="2"]

node:selected

#id2

A simple selector is made of minimal building blocks.

Examples of minimal building blocks of selectors:

.footer

node

[x="2"]

:selected

#id2

When two or more simple selectors are aggregated into a selector, they are separated by combinators. A combinator is a single character which semantics is described in the following table. Extra spaces are ignored.

Combinator symbols
Transition	Meaning
E F	Matches an F element that is a descendant of an E element
E > F	Matches an F element that is a child of an E element
E + F	Matches an F element immediately preceded by an E element

The minimal building blocks of a selector are listed in the following table. For an explanation of the Specificity column, see Priority.

Minimal building blocks of a selector
Building Block	Matching Rule	Specificity
e	Matches any element of type e	0-0-1
#myid	Matches any element with an ID equal to myid	1-0-0
.myclass	Matches any element with class myclass	0-1-0
:myclass	Matches any element with pseudo-class myclass	0-1-0
[myattr]	Matches any element with the myattr attribute that exists and <> null	0-1-0
[myattr=”warning”]	Matches any element whose myattr attribute value is exactly equal to warning	0-1-0
[myattr~=”warning”]	Matches any element whose myattr attribute value is a list of space-separated values, one of which is exactly equal to warning	0-1-0
*	Matches any element	0-0-0

For example, the following line:

P.pastoral.marine { color : green ; size : 10pt ; }

matches <P class="pastoral marine old">, sets the color of the paragraph to green, and sets the font size to 10.

All rules start and end with an implicit “ * ” pattern. This means that a selector can match anywhere inside the hierarchy.

Declaration

Declarations are key-value couples. The separator is a colon (:). Each declaration is terminated by a semicolon (;).

The key should represent a predefined graphic attribute ( foreground, size, font, and so forth) and the value is a literal whose type depends on the key (such as red, 10pt, or serif ). All key-value pairs are String. Enter values in single or double quotation marks, but use single quotation marks when the values contain nonalphanumeric characters.

Inside quoted declaration values, you can use Unicode characters in two ways:

If the CSS file starts with a line '@charset "UTF-8";' and the Unicode characters are printable, you can write or paste Unicode characters with UTF-8 encoding directly in the quoted strings.

You can include them using backslash escape syntax with hexadecimal digits.

For example, \20AC is a Unicode escape sequence denoting the Euro sign. However, if the next character after the last digit in the escape sequence is an unrelated hexadecimal digit, you must insert a space before the next character, as a separator. So if you wanted to write €1000, you would enter \20AC 1000.

Priority

The priority of the rules depends on their relative specificity. Specificity is computed as three numbers, a - b - c (in a number system with a large base). The number of ID building blocks in the selector gives the first number a, the number of classes, pseudo-classes and attributes gives b, and the number of element types gives c.

The examples in the following table are in priority order, with the most specific first.

Priority Order Example
Selector	Specificity
#title > #author.full	“2-1-0”
#title	“1-0-0”
P.intro P.citation	“0-2-2”
UL OL LI.red	“0-1-3”

When two rules give the same specificity number, the order of appearance gives the priority (the last seen overrides previous rules).

Priority is used as follows: first the declarations of all rules that match the same objects are merged, and then the priority is applied only if there is a conflict (same key value) within the merged declaration block.

Cascading

Cascading consists of supplying several sources for the style.

In HTML environments there are three sources: the browser, the user, and the document. Cascading fixes another weight according to the source of the style. Document style takes precedence over user style, which takes precedence over browser style when the specificity number is the same.

There are two more tokens, !important and inherit. They are used to alter the cascading priority inside declarations.

A style sheet can also import other sheets (internal cascading). The syntax is:

@import "[url]" ;

Import statements must precede the first rule in a style sheet. Priorities of the imported rules are computed as if the rules replaced the import statements. Here is an example of import:

@import "common.css" ;

Inheritance

The main principle of CSS is the inheritance of declarations. Once the rules are checked against the source document, the matched declarations are sorted according to the priority order of the rules. The declarations are merged, with higher priority settings overriding lower ones in case of conflict.

The resulting set of key-value pairs represents all the declarations that the style sheet applies to a particular document.