Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of January 2018 12:52:37 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
border-bottom-style
border-left-style


Library Navigation Links

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

Even though you may not realize it, you're already familiar with font weights: boldfaced text is a very common example of an increased font weight. Generally speaking, the darker and "more bold" a font appears, the heavier it is said to be. There are a great many ways to label the heaviness of fonts. For example, the font family known as Zurich has a number of variants such as Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light, and Zurich Regular. Each of these uses the same basic font, but each has a different weight.

normal has been set on an element, this value will be inherited by all the descendants of the element. That's as it should be, of course, but Navigator takes it one step too far. Given the following:

<P STYLE="font-weight: normal;">This is a paragraph which contains a
<B>boldface element</B>, but Navigator 4 won't make the text bold.</P>

That's right: all of the text in the example paragraph will have a normal font weight. For some reason, Navigator 4 doesn't know that it should assign a font-weight ofmore precise, two of them. All we need to do is split the articletext roughly in half, and wrap a DIV around eachhalf. (By article text, we mean the actual text of the article,excluding the title.) Let's use the place where the column endson the printed page as our guide to end the first division and startthe second:

<DIV STYLE="float: left; width: 40%; margin-left: 10%; margin-right: 5%;">

This causes the entire set of text in the first division to become afloating block on the left margin and the following text to flow pastA.external:link {color: silver;} A:active {color: silver;} A:visited {color: #333333;} /* a very dark gray */

Figure 6-4

Figure 6-4. Changing colors of hyperlinks

This sets all anchors with the class external (<A CLASS="external" HREF="...">) to be silver, instead of medium gray. They'll still be a dark gray once they've been visited, of course, unless you add a special rule for that as well:

8.2.2.4. Negative margins

So far, this probably all seems ratherstraightforward, and you may be wondering why I said things could becomplicated. As it turns out, the complication is that margins canhave negative values.

You'll remember that I said the second-simplest rule ofhorizontal formatting was this: the total of the seven horizontal

For those of you concerned about making your documents accessible to older browsers, there is an important warning to be made. You're probably aware that browsers ignore tags they don't recognize; for example, if a web page contains a BLOOPER tag, browsers will completely ignore the tag because it isn't a tag they recognize.