Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 27th of April 2015 08:33:01 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 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.

In a like manner, setting a negative value on the other sides willpull them beyond their normal limits:

<P STYLE="margin: -2em; font-weight: bold;">...

As Figure 7-19 makes abundantly clear, the paragraphhas spilled beyond the edges of the browser window and has not onlypulled up far enough to overlap the end of the previous paragraph,but has also pulled the following paragraph up to overlap its we can see its background is in the padding and content of theH1 itself. Since both background images are thesame size, and they have precisely the same origin position, theyappear to "line up" as shown in Figure 6-57.


There's a downside: as of this writing, web browsersdon't get this fixed alignment right, so this example was justan interesting theoretical exercise.

not dark red. If the bar is marked with an ID ofnavbar, then you need only add this rule:

#navbar A:link {color: yellow;}

This will change the color of hyperlinks within the navigation barwithout affecting other hyperlinks throughout the document.

6.1. Colors

There is really only one type of color in CSS, and that's to make the extra content available to the user. In a web browser,this would mean a scrollbar (or set of them) or another method ofaccessing the content without altering the shape of the elementitself. One possibility is depicted in Figure 9-9,which could result from the following styles:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em;overflow: scroll;}
Figure 9-9

Figure 9-9. Invoking a scrollbar with overflow

If scroll is used, the panning mechanisms (e.g., scrollbars)