Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 06th of October 2015 08:31:45 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:

was discussed earlier in "Margins: Known Issues."Therefore, if you have a background color, some padding, and a borderset for an element, you'll see the background fill the contentarea and the padding as requested, but a transparent space willincorrectly appear between the two, as shown in Figure 7-62.

Figure 7-62

Figure 7-62. Padding problems in Navigator 4

This may be an interesting effect, but it isn't permissibleunder the CSS specification, and no other browser will do the samething, so it's best to avoid this altogether. border-top-style border-right-style border-bottom-style border-left-style

Library Navigation Links

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

styles it contains to render the HTML document, in the manner shown in Figure 1-2.

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="splash.css">

This will cause the browser to load both style sheets, combine the rules from each, and apply the result to the document (see Figure 1-3). We'll see exactly how the sheets are combined in the next chapter, but for now, let's just accept that they're combined. For example:

<LINK REL="stylesheet" TYPE="text/css" HREF="sheet-a.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet-b.css">
<P CLASS="a1">This paragraph will be gray only if styles from the

Figure 6-41

Figure 6-41. More percentage positioning

Note that with percentages the horizontal valuealways comes first. If you were to switch thepercentages in the preceding example, the image would be placedtwo-thirds of the way across the element and one-third of the waydown. It's also worth noting what happens if you only supplyone value. In that case, the single value supplied is taken to be thehorizontal value, and the vertical is assumed to be 50%. This isbasically the same as with the keywords, where if only one keyword is

SELECT {color: rgb(33%,33%,33%);}
INPUT {color: gray;}
Figure 6-12

Figure 6-12. Changing form element foregrounds

Note in Figure 6-12 that the text color next to the checkboxes is still black. This is because we've only assigned styles to elements like INPUT and SELECT, not normal paragraph (or other) text.

One limitation under CSS1 is that there isn't a way to distinguish between different types of INPUT