Web Design in a Nutshell, 3rd Edition

CSS Property Conventions

The CSS chapters in this book use the same syntax for indicating allowable property values that are used in the W3C CSS 2.1 Recommendation. A few examples are shown here:

Value: [<family-name>,]* <family-name>

Value: <uri> [ mix || repeat ]? | auto | none | inherit

Value: [ <border-style> || <border-width> || <border-color> ] | inherit

Value: [<color>|transparent]{1,4}|inherit

The notation indicates the value options and requirements, but it is not always intuitive. The various conventions are explained briefly here.

• Words that appear on their own (for example, inherit) are keyword values that must appear literally, without quotes.

• When punctuation such as commas and slashes (/) appear in the option, they must be used literally in the value as indicated.

• Words in brackets give a type of value (such as <color> and <uri>) or a reference to another property (as in <border-style>).

• If a vertical bar separates values (for example, X | Y | Z), then any one of them must occur.

• A double vertical bar (X || Y) means that X, Y, or both must occur, but they may appear in any order.

• Brackets ([...]) are for creating groups of values.

Every word or bracketed group may be followed by one of these modifiers:

• An asterisk (*) indicates the preceding value or group is repeated zero or more times.

• A plus (+) sign indicates that the preceding value or group is repeated one or more times.

• A question mark (?) indicates that the preceding value or group is optional.

• A pair of numbers in curly braces ({X,Y}) indicates that the preceding value or group is repeated at least X and at most Y times.

Given these syntax rules, the examples above would be interpreted like this:

Value: [<family-name>,]* <family-name>

The value may be a font family name, preceded by zero or more additional font family names, each followed by a comma.

Value: <uri> [ mix || repeat ]? | auto | none | inherit

The value may be one of the keyword options auto, none, and inherit, or it may be a URI followed (optionally) by the keywords mix, repeat, or both.

Value: [ <border-style> || <border-width> || <border-color> ] | inherit

The value may be the keyword inherit, or it may be any combination of values for border-style, border-width, and border-color, in any order.

Value: [<color>|transparent]{1,4}|inherit

The value may be the keyword inherit, or it may be one, two, three, or four “color” values. Each “color” value is provided as either the keyword transparent or one of the standard methods for specifying <color> (such as a color name or RGB value).