There are many other interesting effectsassociated with floating elements. Take the example of a shortdocument, composed of no more than a few paragraphs andH3 elements, where the first paragraph contains afloated image. Further, this floated image has a right margin of fivepixels (5px). You would expect the document to berendered very much as shown in Figure 7-67.

Figure 7-67

Figure 7-67. Floating an image

Nothing unusual there, of course, but look what happens when we set Wednesday 13th of December 2017 08:01:39 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the
catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

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

<P STYLE="font-size: 12px; line-height: 12px;">
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE="font-size: 24px;">boldfaced</B>
and <SPAN STYLE="vertical-align: top;">tall</SPAN> and which is<BR>
larger than the surrounding text.

Now we're back to our earlier example, where the middle line box is taller than the other line boxes. However, notice how the "tall" text is aligned in Figure 8-54.

A[name] {color: purple;}      /* colors any NAME anchor purple */IMG[border] {border-color: blue;}  /* sets blue border for any bordered IMG */[class] {color: red;}        /* sets any classed element red */

In none of these situations does it matter what value is assigned tothe attributes of each element. As long as the given attribute ispresent for the element, the element will match the selector shown.Thus, in the following example, the first two IMGelements shown will match the preceding rule, whereas the third willnot, as illustrated by Figure 10-7:

value), and thick. These keywords don'tnecessarily correspond to any particular width but are simply definedin relation to one another. According to the specification,thick is always wider thanmedium , which is in turn always wider thanthin.

However, the exact widths are not defined, so one user agent couldset them to be equivalent to 5px ,3px , and 2px , while anotherthe SPAN text (which is set to be bolder) will inherit the value of 100 and then evaluate to the next-heaviest face, which is the Bold face and which has a numerical weight of 700. Figure 5-11 shows us the visual result of all this.

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules, plus some markup, to illustrate how all this works (see Figure 5-12 for the results):