 | Cascading Style Sheets: The Definitive Guide |  |
Friday 20th of April 2018 04:43:02 PM
In CSS1, there are quite a few properties Thus, if an image is 150 pixels wide, and itswidth property is set to the valueauto, then its width willevaluate to 150px , as shown in Figure 8-26:
IMG {display: block; width: auto;}
Replaced elements can have their height andwidth set to a value other thanauto or their intrinsic dimensions. This is most 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
|  | |
| 10.5. Adapting to the Environment |  | 10.7. Tables |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
If only one of width ,margin-left, or margin-right isset to a value of auto, while the others are givenspecific values, then the property set to be autowill evaluate to whatever length is required to make the elementbox's width equal the parent element'swidth. Thus, if the sum of the seven properties browser window, you can declare the following, shown in Figure 7-12:
H1 {margin: 0.5em 10% 0.5em 10%;}
Here, although the top and bottom margins will stay constant in anysituation, the side margins will change based on the width of thebrowser window. This of course assumes that all H1elements are the child of the BODY element andthat BODY is as wide as the browser window. Moreproperly stated, the side margins of H1 elements
In a fashion very similar to setting the foreground color, it's possible to declare a color for the background of an element. For this, you use the property background-color, which accepts (unsurprisingly) any valid color.