Multiple Values

If multiple values must occur in a certain order, they are given as a list. The following example could be used in the definition of a property that always required a color and a number (there is no such property in CSS1; this is just an example):

Value:	<color> <number>
Example:	red 7.5
Example:	#CECECE 25

Vertical Bars | and ||: A single vertical bar | separates alternative values. For example, in A|B, the | separates A and B; either A or B will be used. You may have any number of alternatives. One and only one of the alternatives must occur. In the following examples, exactly one of the listed values must occur:

Example:	normal
Example:	{ font-style: normal }
Example:	left | right | center | justify
Example:	right
Example usage:	H1 { text-align: right }

A double vertical bar | | also separates alternative values; for example, A | | B. However, the | | means that either A or B or both must occur. Further, they may occur in any order. In the following example, there may be a color or a url or both, and their order is not important:

Example:	red url(logos/logo.png)
Example:	url(logos/logo.png) black
Example:	#00FF00
Example:	url(logos/logo.png)

Another example, slightly more complicated, is taken from the definition of the border property, which has a value defined as follows. The types border-width and border-style are defined in Chapter 8, "Space Around Boxes."

Example:	1pt dotted blue
Example:	dotted
Example:	black 0.5pt
Example:	P.note { border: red double 2px }

Curly brackets { }: Curly brackets { } indicate that the preceding value may occur at least A and, at most, B times. This is written as {A, B}. For example, in the following example, a length value may occur one, two, three, or four times:

Example:	2em
Example:	2em 3em
Example:	2em 3em 4em
Example:	2em 3em 4em 5em
Example usage:	P { margin: 2em 3em 4em 5em }

In this example, we use the margin property to set a different margin for each of the four sides of a P element. See Chapter 8 for a complete definition of margin.

Question marks (?), asterisks (*), and plus (+): Any type or keyword may be followed by one of the modifiers +, *, or ?. A plus (+) indicates that the preceding item may be repeated. The item must occur one or more times.

Value:	<percentage>+
Example:	0% 50% 50% 11% 0.1%
Example:	37.5%

An asterisk (*) indicates that the preceding item may be repeated, but it may also be omitted. It may occur zero or more times.

Value:	<length>*
Example:	12pt 12ex 3.5mm 12pt 12pc 3.6mm
Example:	1.1in.

Note that the last example has no value at all.

A question mark (?) indicates that the preceding type or keyword is optional.

Value:	<url>? <color>
Example:	url(http://www.w3.org/pub/WWW) black
Example:	white

In this example, the available values are a url and a color. <url> is followed by a ?, while <color> is not. Hence, the URL may be omitted, but the color may not. The background property has a value similar to that and, in that property, the presence of both values means that the color is displayed with the image on top of it. If the image pointed to by the url is unavailable, just the color is displayed.

Regular brackets [ ]: Regular ("square") brackets group parts of the definition together. A question mark, asterisk, or other special symbol that follows the closing bracket applies to the entire group. The following example shows a group with a vertical bar inside and curly braces on the outside to indicate that the entire group may be repeated between one and four times.

Value:	[ <length> | <percentage> ]{1,4}
Example:	12pt 10pt 12pt 5pt
Example:	10%
Example:	10% 10% 1px
Example usage:	ADDRESS { padding: 5% 1 em }

In each case, there are between one and four values, and each of the values is either a length or a percentage.

Here is another, more complex example. It is a simplification of the definition of font-family.

Value:	[ <family-name>, ]* <generic-family>
Example:	helvetica, arial, sans-serif
Example:	serif
Example usage:	EM { font-family: Helvetica, Arial, sans-serif }

The group has an asterisk to indicate that it can occur zero or more times. The group itself consists of a family-name and a comma. In the first example, the group occurs twice there are two families and two commas while in the second example, the group is completely absent; just generic-family appears.