Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 23rd of October 2017 02:36:49 AM

0.3. How to Contact Us

We have tested and verified the information in this book to the best of our ability, but you may find that features have changed (or even that we have made mistakes!). Please let us know about any errors you

P.roof {border-top: dashed;}

Another thing to note is that since each of these "border-side" properties applies only to a specific side, there isn't any possibility of value replication -- it wouldn't make any sense. There can only be one of each type of value: that is, only one width value, only one color value, and only one border style. So don't try to declare more than one value type:

H3 {border: thin thick solid purple;}  /* two width values--WRONG */
find, as well as your suggestions for future editions, by writing to:

O'Reilly & Associates, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

(800) 998-9938 (in the U.S. or Canada)

(707) 829-0515 (international/local)

(707) 829-0104 (fax)

You can also send us messages electronically. To be put on the mailing list or request a catalog, send email to:

To ask technical questions or comment on the book, send email to:

We have a web site for the book, where we'll list examples, errata, and any plans for future editions. You can access this page at:

For more information about this book and others, see the O'Reilly web site:

Library Navigation Links

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

larger than the surrounding text. </P>

Since we've given the "tall" text a line-height of 18px , the difference between font-size and line-height is 6 pixels. In this case, though, the half-leading of 3 pixels is added to the content area, not subtracted (since the line-height is more than the font-size). This will result in an inline box 18 pixels tall, and its top is aligned with the top of the line box.

Figure 11-22

Figure 11-22. A drop cap

There's an easy way to do this, and that is of course to usethe :first-letter pseudo-element. The style wouldlook something like this:

P.intro:first-letter {font-size: 300%; font-weight: bold; float: left;width: 1em;}

This will result in approximately what is seen in Figure 11-22.

Figure 6-40

Figure 6-40. Lining up the center of the image with the center of the browser window

Thus, if you want to place a single background image a third of theway across the element and two-thirds of the way down, then yourdeclaration would be:

BODY {background-image: url(bigyinyang.gif);background-repeat: no-repeat;background-position: 33% 66%;}

The point in the background image that is one-third across andtwo-thirds down from the top left corner of the image will be aligned :focus

Similarto :hover is :focus, which isused to define styles for elements that are "in focus." Aform element, for example, has "focus" when it iscurrently ready to accept input. Therefore, the background ofINPUT elements could be set to yellow in order tohighlight the currently active input:foreground color, we also set a background color. In general, this isa good idea. Since you don't know what styles a user may havepredefined, you don't know how your styles might interact withthem. Remember the example where links ended up being white on white?That's the sort of thing we want to avoid.

Let's explore this in a little more detail. Assume thefollowing:

Since, in this circumstance, the author's styles will outweigh