Book Home Saturday 22nd of November 2014 02:18:13 AM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

BIG text to generate toomuch extra leading, just use these rules instead:

P {font-size: 12px; line-height: 1.5;}SMALL {font-size: 66%;}BIG {font-size: 200%; line-height: 1em;}


Anything this useful has to have a drawback, right? As it happens,Internet Explorer 3.x will >

If you are having difficulty searching, or if you have not used this search utility before, please read this.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

</DIV><DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10% of the width of the paragraph's parent.There will, therefore, be half as much padding on this paragraph as thaton the first paragraph.</P>
Figure 7-59

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- butit's worth reviewing again, just to see how it operates.

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 clearspecify black -- the absence of color -- all three would be set to 0%. Here are a few more color declarations:

H1 {color: rgb(0%,0%,0%);}          /*black*/
H2 {color: rgb(50%,50%,50%);}       /*medium gray*/
H3 {color: rgb(25%,66%,40%);}

The general syntax of this type of color value is:


where color is one of two ways to specify the color. The first way is to use percentages, and the second, which

On the other hand, we might want H1 elements tohave uneven padding and H2 elements to have regular padding, as shownin Figure 7-57:

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
Figure 7-57

Figure 7-57. Uneven padding

It's a little tough to see the padding, though, so let'sadd a background color, as shown in Figure 7-58:

The first value in each pair is for the Windows version; the secondvalue is for the Macintosh version. (Sorry, Macintosh folks, but weare in the minority.) For instance, IE4 Y/N means that the propertyis supported in IE4 for Windows, but not IE4 for Macintosh. Thepossible support values are:

Style declaration is made important,thereby raising its weight in the cascade. Important declarationsoverride all others. In CSS1, important author styles override allreader styles, even important ones. In CSS2, this is reversed, so