Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 30th of April 2016 07:09:51 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
properties set for inline elements. The only effect is that the space
taken up by the borders may shift portions of the line over a bit,
which may in turn change which word is at the end of the line. Turn
to Figure 7-54 to see what happens when an inline
element with a border is displayed across multiple lines:

B {border: 3px solid gray; background: silver;}
Figure 7-54

Figure 7-54. An inline element with a border displayed across multiple lines of text

In Figure 7-54, the left border is applied to the beginning of the element, and the right border to the end of it. border-right-style border-bottom-style border-left-style



Library Navigation Links

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

elements. In that case, we need to use the child selector:

This translates as, "any paragraph that is a first child, and is a child of a DIV, should be in italics." If we were to leave out the child selector as follows, though:

then the rule would read, "any paragraph that is a first child of any element, and is also a descendant of a DIV, should be in italics." The difference is subtle, but real.

of XML, which has no such hierarchy, display is indispensable.

In CSS2, the range of values for display is dramatically expanded.See Chapter 10, "CSS2: A Look Ahead", for more details.

Example

.hide {display: none;}

Values

block | inline |list-item | none