Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 26th of September 2016 12:27:53 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
does not exist. Those words were picked carefully because they help
explain what's going on here. Since the border doesn't
exist, it can't have any width, so the width is automatically
set to 0 (zero). This may seem completely
backward, but it actually makes a great deal of sense. After all, if
a drinking glass is empty, you can't really describe it as
being half-full of nothing. You can only discuss the depth of a
glass's contents if it has actual contents. In the same way,
talking about the width of a border only makes sense in the context
of borders that have some existence.
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.

exactly about, CSS. Some authors have reported trouble with gettingtheir web hosts to correctly serve up external style sheets. Apparently, withsome web servers, the file extension .css ismapped to the MIME typex-application/css, or "Continuous SlideShow," instead of the MIME type text/css.Even older servers may not have any mapping for.css, and so will serve up the files astext/plain.

the numbers, 100 through 300are assigned to the Regular face because there isn't a lighterface available. 400 goes to Regular as expected,but what about 500 ? It is assigned to the Regular(or normal) face because there isn't aMedium face available; thus, it is assigned the same as400. As for the rest, 700 goeswith bold as always, while 800and 900, lacking a heavier face, are assigned tothe Bold font face. Finally, 600 is assigned tobrowser should ignore the text because it isn't part of theBODY element, but this is never the case.) Thisproblem is illustrated in
Figure 1-5.

Figure 1-5

Figure 1-5. Older browsers will literally display your style sheets

In order to combat thisproblem, it is recommended that you enclose your declarations in acomment tag. In the examplegiven here, the beginning of the comment tag appears right after theopening STYLE tag, and the end of the comment first line in the following example can be rewritten with thesubsequent CSS, and either will have the result depicted in Figure 6-3:

<BODY TEXT="black" LINK="#808080" ALINK="silver" VLINK="#333333">BODY {color: black;}     /* replacement CSS */A:link {color: #808080;}A:active {color: silver;}A:visited {color: #333333;}
Figure 6-3

Figure 6-3. Replacing BODY attributes with CSS

While this may seem like a lot of extra typing, consider that using list-item's content area, so you get effects like thoseillustrated in Figure 8-25.

In CSS1, very little is said about the placement and effects of thismarker with regard to the layout of a document.CSS2 introduces properties specificallydesigned to address this issue, such asmarker-offset. Since this property and its cousinsare not widely supported at the time of this writing, we will notspend time on it here. There is a brief discussion of the marker