Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 22nd of September 2017 04:41:21 AM

6.3. Summary

Setting colors and backgrounds on elements gives authors a great deal of power in CSS. The advantage of CSS over traditional methods is that colors and backgrounds can be applied to any element in a document -- not just table cells, for example, or anything enclosed in a FONT tag. Despite a few bugs in some implementations, like Navigator 4's reluctance to apply a background to the entire content area of an element, these are very widely used properties. Their popularity isn't too hard to understand, either, since color is one easy way to distinguish the look of one page from another.

CSS allows for a great deal more in the way of element styling, however: borders that can be placed on any element, extra margins and padding, and even a way to "float" elements other than images. These are all covered in the next chapter.

Library Navigation Links

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

the height and width are not precisely defined. For example, there isno way to create a clipping rectangle that is 1 em larger than thiselement's content area:

position: absolute; top: 0; bottom: 50%; right: 50%; left: 0;

Since there is no way to know how many ems tall or wide the elementwill be, there is no way to make a clipping rectangle that ends 1 emto the right, or 1 em below, the content area of the element.

Further compounding the problem is that rect(...) pixels (which is half of 14px), not25 pixels. Also note that the line-box has been made tallenough to accommodate the image. This is actually consistent with theinline box model, because replaced elements have this kind of effect.

We can see the operation of vertical alignment more clearly if wehave two images, one of which is vertically aligned with a percentagevalue. The results, shown in Figure 4-43, aredependent on the line-height, which we'llexplicitly declare to be 14px:

This rule prevents floated elements from overwriting each other. Ifan element is floated to the left, and there is already a floatedelement there due to its earlier position in the document source,then the latter element is placed against the outer right edge of thepreviously floated element. If, however, a floated element'stop is below the bottom of all earlier floated images, then it canfloat all the way to the inner left edge of the parent. Some examplesof this are shown in Figure 8-31.

Figure 8-31

Figure 8-31. Keeping floats from overlapping