Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 18th of December 2014 05:01:31 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 H2.dkblue {color: navy;} A:link {color: maroon;} /* a good dark red color */

Any H2 which should be dark blue would then be marked up as <H2 CLASS="dkblue">...</H2>.


It's actually better to pick class names that are descriptive of the type of information contained within, not of the visual effect you're trying to achieve at 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:


Library Navigation Links

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

the great-grandchild of an LI that is the direct child of the OL, and the OL is the grandchild of the BODY element. The first EM is not matched because its grandparent OL is not the direct child of a DIV.

Even better, you can string more than one child selector together to precisely target a given type of element. Take this, for example:

There isn't much that can be done about this, unfortunately, save better font handling by operating systems. Usually, the italic and oblique fonts look exactly the same in web browsers.

Still, font-style can be useful. For example, it is a common typographic convention that a block quote should be italicized, but that any specially emphasized text within the quote should be upright. In order to employ this effect, shown in Figure 5-28, you would use these styles:

There is one interesting thing about CSS that can make life difficultfor authors. According to CSS1, a user agent is allowed to interpretany value of border-style (besidesnone) as solid. Because of thisallowance, a user agent that is technically CSS1-compliant coulddisplay the following as all solid:

P.new3 {border-style: ridge dashed double;}

The result shown in Figure 7-35 wouldn't bewhat the author had in mind, of course, but it's technically useful. Although it's the default value, users might set theirbrowsers to make all links have a white background. When you designyour page, though, you set anchors to have a white foreground, andyou don't want a background on those anchors. In order to makesure that this happens, you would declare:

A:link {color: white; background-color: transparent;}

If you left out the background color, then your white foregroundwould combine with the user's white background to yield totallyunreadable links.image will be a certain number of pixels high and wide. Given this,if either height or width areset to auto for a replaced element, then the valuewill always evaluate to the intrinsic height or width of the element.Thus, if an image is 150 pixels wide, and itswidth property is set to the valueauto, then its width willevaluate to 150px , as shown in Figure 8-26:

IMG {display: block; width: auto;}