Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 24th of May 2016 11:50:04 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 As you can see, @import is found inside the STYLE container. It must be placed there, before the other CSS rules, or else it won't work at all.

<STYLE TYPE="text/css">
@import url(styles.css); /* @import comes first */
H1 {color: gray;}
</STYLE>

Like LINK, there can be more than one @import statement in a document. Unlike

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

This is permitted under CSS1, which states that browsers can ignoreany value of height other thanauto if an element is not a replaced element suchas an image. UnderCSS2, it is possible to set up asituation where scrollbars would be applied to an element such as aparagraph.

It's also possible to set the top and bottom margins of a

For example, to make sure allH2 elements are not placed to the right ofleft-floated elements, then you would declare H2{clear: left;}. This can betranslated as "make sure that the left side of anH2 is clear of floating images" and is areplacement for the HTML construct<BRclear="left">. Figure 7-74shows the following declaration, which uses clearLINK: the@import directive. Just likeLINK, @import can be used todirect the web browser to load an external style sheet and use itsstyles in the rendering of the HTML document. The only realdifference is in the actual syntax of the command and its placement.As you can see, @import is found inside theSTYLE container. It must be placed there, beforethe other CSS rules, or else it won't work at all.

margins, those margins will not collapse with the margins on the floated image, as we can see in Figure 7-65:

P IMG {float: right; margin: 20px;}
Figure 7-65

Figure 7-65. Floating images with margins

(To resurrect the old paper-and-plastic analogy, the plastic margins around an image never overlap the plastic surrounding other elements.)

If you do float a"set the clipping edge to the appropriate content edge." Thus, the following two statements mean the same thing:

overflow-clip: rect(auto, auto, 10px, 1cm);
overflow-clip: rect(0, 0, 10px, 1cm);

It is possible to set negative lengths, though, which will expand the clipping area outside the element's box. If you wanted to push the clipping area up and left by a quarter-inch, it would be done with the following styles (illustrated by Figure 9-12):