Throughout this book, there are boxes that break down a given CSS property. These have been reproduced practically verbatim from the CSS specifications, but some explanation of the syntax is in order.
Throughout, the allowed values for each property are listed with a syntax like the following:
Value: [ <length> | thick | thin ]{1,4} |
Value: [<family-name> , ]* <family-name> |
Value: <url>? <color> [ / <color> ]? |
Value: <url> || <color> |
Any words between
“<” and
“>” give a type of value, or a
reference to another property. For example, the property
font
will accept values that actually belong to
the property font-family
. This is denoted by using
the text <font-family>. Any words presented in
constant
width
are keywords
that must appear literally, without quotes. The
forward slash (/) and the
comma (,) must also be used literally.
Several keywords strung together means that all of them must occur,
in the given order. For example, help me
would
mean that the property must use those keywords in that exact order.
If a vertical bar separates alternatives (X | Y), then any one of them must occur. A vertical double bar (X || Y) means that X, Y, or both must occur, but they may appear in any order. Brackets ([...]) are for grouping things together. Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus “V W | X || Y Z” is equivalent to “[ V W ] | [ X || [ Y Z ]]”.
Every word or bracketed group may be followed by one of the following modifiers:
An asterisk (
*
) indicates that the preceding value or bracketed group is repeated zero or more times. Thus,bucket*
means that the wordbucket
can be used any number of times, including zero. There is no upper limit defined on the number of times it can be used.A plus (
+
) indicates that the preceding value or bracketed group is repeated one or more times. Thus,mop+
means that the wordmop
must be used at least once, and potentially many more times.A question mark (
?
) indicates that the preceding value or bracketed group is optional. For example,[pine
tree]?
means that the wordspine
tree
need not be used (although they must appear in that exact order if they are used).A pair of numbers in curly braces (
{M,N}
) indicates that the preceding value or bracketed group is repeated at leastM
and at mostN
times. For example,ha{1,3}
means that there can be one, two, or three instances of the wordha
.
Some examples follow:
-
give
||me
||liberty
At least one of the three words must be used, and they can be used in any order. For example,
give
liberty
,give
me
,liberty
me
give
, andgive
me
liberty
are all valid interpretations of this example.-
[ I | am ]? the || walrus
Either the word
I
oram
may be used, but not both, but use of either is optional. In addition, eitherthe
orwalrus
, or both, must follow in any order. Thus, you could constructI
the
walrus
,am
walrus
the
,am
the
,I
walrus
,walrus
the
, and so forth.-
koo
+ka-choo
One or more instances of
koo
must be followed byka-choo
. Therefore,koo
koo
ka-choo
,koo
koo
koo
ka-choo
, andkoo
ka-choo
are all legal. The number ofkoo
s is potentially infinite, although there are bound to be implementation-specific limits.-
I really{1,4}? [love | hate] [Microsoft | Netscape | Opera | Safari]
The all-purpose web designer’s opinion-expresser. This can be interpreted as
I
love
Netscape
,I
really
love
Microsoft
, and similar expressions. Anywhere from zero to fourreally
s may be used. You also get to pick betweenlove
andhate
, even though onlylove
was shown in this example.-
[[Alpha || Baker || Cray],]{2,3} and Delphi
This is a potentially long and complicated expression. One possible result would be
Alpha
,Cray
,and
Delphi
. The comma is placed because of its position within the nested bracket groups.
Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.