Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 22nd of November 2017 10:45:50 PM

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.

further than CSS1 to provide control over the ordering. For example,there is no way in CSS1 to automatically create subsection counterssuch as "2.1" or "7.1.3." This can, however,be done under CSS2 and is briefly discussed in Chapter 10, "CSS2: A Look Ahead".

7.7.3. List Item Positions

There is one other thing you can do toinfluence the appearance of list items under CSS1, and that's to be auto is reduced to zero:

P {width: auto; margin-left: auto; margin-right: 100px;}

The width is then set to the value necessary toreach the required total, as demonstrated in Figure 8-16.

Figure 8-16

Figure 8-16. Setting an explicit right margin

Finally, what happens when all three properties are set toauto ? The answer is simple: both margins are setto zero, and the width is made as wide asproblem, it is recommended that you enclose your declarations in a comment tag. In the example given here, the beginning of the comment tag appears right after the opening STYLE tag, and the end of the comment appears right before the closing STYLE tag:

<STYLE type="text/css"><!--
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}