Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 28th of June 2016 07:56:15 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:

P {font-size: 12px; line-height: 1.5;}
SMALL {font-size: 66%;}
BIG {font-size: 200%;}
<P>This paragraph has a line-height of 1.5 times its font-size. In addition,
any elements within it <SMALL>such as this small element</SMALL> also have
line-heights 1.5 time their font-size... and that includes <BIG>this big
element right here</BIG>. By using a scaling factor, line-heights scale
to match the font-size of any element.</P>
Figure 8-64

Figure 8-64. Using a scaling factor for line-height

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


Library Navigation Links

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

Example

:linkIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

This pseudo-class applies tohyperlinks, but not named anchors. It sets the styles to be used fora hyperlink that points to a URI that has not yet been visited (i.e.,is not listed in the browser's history).

Example

>This pseudo-class applies tohyperlinks, but not named anchors. It sets the styles to be used fora hyperlink that points to a URI that has already been visited (i.e., use of the keyword bolder. If we were to replace the text in the paragraph with numbers representing the font-weight of each element, we would get the results in Figure 5-13:

<P>
100 <SPAN> 400 <STRONG> 700 <B> 800 </B></STRONG></SPAN>.
</P>
Figure 5-13

Figure 5-13. Changing weight, with the numbers to illustrate it

The first two weight increases are large because they represent jumps Similarly, left describes how far to the right (for positive values) or left (for negative values) the outer left edge of the positioned element is from the left edge of its containing block. Another way to look at it is that positive values cause inward offsets, moving the edges toward the center of the containing block, and negative values cause outward offsets.

TIP

The description of offsetting the outer edges is based on an erratum. The original CSS2 specification actually