Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:27:12 PM

0.2. Property Conventions

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 which actually belong to the property font-family. This is denoted by using the text "<font-family>." Any words presented in constant width text 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 ( X | Y ) separates alternatives, then any one of them must occur. A vertical double bar ( X || Y ) means that either X or 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:

Following are some examples:

give|| me|| liberty

At least one of the three words must be used, and all of them can be used in any order. For example, give liberty, give me, liberty me give, and give me liberty are all valid interpretations of this background image</A> which is tiled only within the anchor.</P>

Figure 6-24

Figure 6-24. A background image on an inline element

There are a number of ways to employ this technique. You might place an image in the background of STRONG elements, in order to make them stand out more. You could fill in the background of headings with a wavy pattern, or with little dots. You can even fill in the cells of tables with patterns to make them distinct from the rest of the page, as shown in Figure 6-25:

TD.nav {background-image: url(darkgrid.gif);}

[ I| am] ? the|| walrus

Either, but not both, of the words I or am may be used, but use of either is optional. In addition, either the or walrus, or both, must follow. Thus, you could construct I 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 by ka-choo. Therefore, koo koo ka-choo, koo koo koo ka-choo, and koo ka-choo are all legal. The number of koos is potentially infinite, although there are bound to be implementation-specific limits.

I really {1,4}* [ love| hate] [ Microsoft| Netscape ]

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 four really s may be used. You also get to pick between love and hate, even though only love 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. Another is Alpha Baker, Cray Alpha, Baker Cray Alpha, and Delphi. The comma is placed due to its position within the nested bracket groups.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

different from the others, then a color would start to emerge. If, for example, rgb(50%,50%,50%) were modified to be rgb(50%,50%,60%), the result would be a medium gray with just a hint of blue.

The equivalents for the various rainbow primaries, plus a few others, are presented in Table 3-1.

Table 3-1. Numeric RGB Equivalents for Common Colors

It is also possible, at least in theory, to use fractional values.

top, right, bottom, left


Percentages refer to the width of the containing block(right, left) or the height ofthe containing block (top, bottom).

again with a much bigger symbol, as shown in Figure 6-33:

Figure 6-33

Figure 6-33. Placing a single, large backround image

BODY {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;} Real-world uses

The ability to control the repeat direction dramatically expands the range of effects possible in document design. For example, let's say you want a triple border on the left side of each H1 general, the height of an element is determined by its content. Thiscan be affected by its width, of course; the skinnier a paragraphbecomes, for example, the taller it has to be in order to contain allof the textual (and other) content.

In CSS, it is possible to set an explicit height on any block-levelelement. If this is done, the resulting behavior is somewhatuncertain. Assume that the specified height is greater than thatneeded to display the content: