Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 19th of January 2017 01:52:26 PM

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 900. These number keywords were defined to map to a relatively common feature of font design in which a font is given nine levels of weight. OpenType, for example, employs a numeric scale with nine values. If a font has these levels built in, then the numbers are mapped directly to the predefined levels, with 100 as the lightest variant of the font, and 900 as the heaviest.

In fact, there is no intrinsic weight in these numbers. The CSS specification says only that each number corresponds to a weight at 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
border-bottom-style
border-left-style


Library Navigation Links

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

WARNING

Percentage values refer to the width of the parent element.

These propertiesoperate as you'd expect by now. For example, the following tworules will give the same amount of padding:

H1 {padding: 0 0 0 0.25in;}block-level element. Thus, declaring P.spacious{line-height: 24pt;} means thatthe minimum height for each line box is 24 points. Technically, theonly way content will inherit this line height is if it is inheritedby an inline element. Most text isn't contained by an inlineelement. Thus, if we pretend that each line is contained by thefictional LINE element, then the model works outvery nicely.

For the most part, the text in both paragraphs looks fairly normal. In the second one, however, the place where the boldface element would have appeared is simply closed up, and the positioned text overlaps the some of the content. There is no way to avoid this, short of positioning the boldfaced text outside of the paragraph (by using a negative value for right) or by specifying a padding for the paragraph that is wide enough to accommodate the positioned element. Also, since it has a transparent background, the parent element's text shows through the positioned element. The only way to avoid this is to set a background for the positioned