Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:04:30 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 example.

[ 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. margin-left, or margin-right isset to a value of auto, while the others are givenspecific values, then the property set to be autowill evaluate to whatever length is required to make the elementbox's width equal the parent element'swidth. Thus, if the sum of the seven propertiesmust equal 400 pixels, and no padding or borders are set, and theright margin and width are set to 100px while theleft margin is set to auto, then the left marginwill be 200 pixels wide:

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.

Padding and borders are applied to replaced elements as normal; padding inserts space around the actual content (for example, a graphic) and the border surrounds the padding. What's interesting is that these two things actually do influence the height of the line box. Consider Figure 8-66.

Figure 8-66

Figure 8-66. Adding padding and borders to an inline replaced element

Note that the "first" line box is tall enough to contain the image, whereas the "second" is tall enough to containwhat's coming soon -- or, if you're reading this booka year or three after its publication, what can be done.

You may notice that, unlike other chapters, almost none of thefigures in this chapter was generated with a web browser. This issomething of a statement about the reliability and consistency ofpositioning implementations at the time of this writing: not one ofthem was solid enough to trust completely. It was actually easier todraw theoretical examples by hand than to take screenshots in webbrowsers and then retouch them in Photoshop.light purple background. There are almost infinite possibilities:defining red text for warnings, using a dark purple to make boldfacedtext even more obvious, setting each heading to be a different shadeof green, and on and on.

Of course, this means that when you're designing a page, youneed to put some thought into it first. That's generally truein any case, but with colors, it's even more so. For example,if you're going to set all hyperlinks to be yellow, will thatclash with the background color in any part of your document? If you After everything else, applyingmargins, borders, and padding to inline replaced elements almostseems simple.

Padding and borders are applied to replaced elements as normal;padding inserts space around the actual content (for example, agraphic) and the border surrounds the padding. What'sinteresting is that these two things actually do influence the heightof the line box. Consider Figure 8-66.

EM {font-style: oblique;} I {font-style: italic;}

If you look closely at Figure 5-26, you'll see there is no apparent difference between the EM and I elements. In practice, not every font is so sophisticated as to have both an italic face and an oblique face, and even fewer web browsers are sophisticated enough to tell the difference when both faces do exist.

Figure 5-26

Figure 5-26. More font styles