Friday 28th of August 2015 11:25:48 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book


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.

and Incline.

If you wanted to make sure that a document uses italic text in familiar ways, you could write a style sheet like this:

P {font-style: normal;}
EM, I {font-style: italic;}

As we can see in Figure 5-25, these styles would make paragraphs use an upright font, as usual, and cause the

Again, all we have here are the pieces of a single line of text which have been stacked on top of one another with their right sides lined up with each other. If we had set the paragraph to have a text-align of center, then the centers of the line boxes would have lined up, and if it were set to justify, then each line box would be forced to be as wide as the paragraph's content area. The difference is made up in letter- and word-spacing, as we see in Figure 8-49.

Figure 8-49

Figure 8-49. Line-box layout with full justification

add a background color, as shown in
Figure 7-58:

H1 {padding: 10px 0.25em 3ex 3cm; background: silver;}H2 {padding: 0.5em 2em; background: silver;}
Figure 7-58

Figure 7-58. Uneven padding with background colors

As Figure 7-58 demonstrates, thebackground of an element extends into thepadding. As we discussed before, it also extends to the outer edge ofthe border, but the background has to go through the padding beforeit even gets to the border.

Let's assume, though, that we just want images down the left side of the document. Instead of having to create a special image with a whole lot of blank space to the right of the image, we can instead make a small change to our styles:

BODY {background-image: url(yinyang.gif);
background-repeat: repeat-y;}

As Figure 6-29 demonstrates, the image is simply repeated along the y-axis (that is, vertically) from its startingbackground-repeat: no-repeat; background-position: 50% 50%;}

This causes the background image to be placed such that its center is aligned with the center of its parent element, as demonstrated in Figure 6-39. In other words, the percentage values apply to both the element and the background image.

Figure 6-39

Figure 6-39. Centering the background image using percentages

In order to understand this concept, let's examine this process in closer detail. When you center a background image in an element,

Figure 1-1

Figure 1-1. A simple document

Now, let's examine each portion of the document.

1.4.1. The LINK Tag

<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">

First we consider the use of theLINK tag. The LINK tag is alittle-regarded but nonetheless perfectly valid tag that has beenhanging around the HTML specification for years, just waiting to be