Wednesday 28th of June 2017 07:13:08 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book <INPUT TYPE="checkbox" NAME="c3" VALUE="one ">

This allows you to dispense with the classes altogether, at least inthis instance. See the Chapter 10, "CSS2: A Look Ahead", for more detailson how this kind of selector works.

WARNING

Navigator 4 does not apply colors to form elements, but setting thecolors for form elements does work in Internet Explorer 4 and 5, andOpera 3.5 and later.

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Y

There are no index entries for this letter.


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


Library Navigation Links

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

translated 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 clearto prevent H2 elements from flowing past floatedelements to the left side:

H2 {clear: left;}

Here, the width of the element is effectively 60% the width of itscontaining block.

As wonderful as all of this is, there arises a serious question.Suppose you have a positioned element that you don't want to beany smaller than a certain size? Consider the following styles:

top: 10%; bottom: 20%; left: 50%; right: 10%;

Thus the height is 70%, and the width 40% of the containingblock's height and width. That's fine as far as it

While it's nice to haveshorthand properties like border-color andborder-style, they aren't always a whole lotof help. For example, you might want to set all H1elements to have a thick, gray, solid border, but only along thebottom. There are two ways to accomplish this:

H1 {border-bottom-width: thick;   /* option #1 */border-style: none none solid;border-color: gray;}

B {padding-left: 10px; padding-right: 10px; background: silver;}
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of the boldfaced text. There's your padding.

This all seems familiar enough, even when the boldfaced text stretches across multiple lines. Turn to Figure 7-61 to see what happens with padding set on an inline element displayed across multiple lines: