Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 03rd of July 2015 01:05:33 AM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:

border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style

To avoid this sort of thing, and to make sure thatH2 elements do not coexist on a line with anyfloated elements, we use the value both. Thisvalue prevents coexistence with floated elements on both sides of theelement, as shown in Figure 7-76:

H2 {clear: both;}
Figure 7-76

Figure 7-76. Clear on both sides

If, on the other hand, we're only worried about H2 elements flowing past floated elements to their right, then we'd use H2 {clear: right;}, with the result shown in
Figure 7-77.
Figure 7-77

Figure 7-77. Clear to the right

border-bottom-style border-left-style


Library Navigation Links

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

contains an inline boldface element, and the second an absolutelypositioned boldface element. In the second paragraph, the styles usedwould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal.In the second one, however, the place where the boldface element