Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:23:16 PM

4.2. Summary

Even without trying to alter the font in use, there are many ways to change the appearance of text. There are classic effects such as underlining, of course, but CSS also gives us the ability to draw lines over text or through it, change the amount of space between words and letters, indent the first line of a paragraph (or other block-level element), align text to the left or right, and much more. You can even alter the amount of space between lines of text, although this operation is unexpectedly complicated and covered in detail in Chapter 8, "Visual Formatting".

These behaviors are all relatively well supported, or else not supported at all. Full justification of text is one of the big ones that is not well supported, and most user agents released during the twentieth century exhibited bugs in the text decoration and vertical alignment, as well as line height calculations. On the other hand, word and letterspacing almost always work correctly when they're supported, and text indentation has experienced only a few very small bugs. The same is true of the ability to alter capitalization, which is usually supported correctly. background-color, which accepts (unsurprisingly) any valid color.


The background is the area of the content box and the padding and is always behind the foreground of the element. Therefore, the declared background color is applied to both the element's content box and its padding, as illustrated in Figure 6-14:

Of course, the other thing authors generally want to do with text is change which font is being used, as well as change its size, weight, and other aspects of the font. We'll see how this happens in the next chapter.

Library Navigation Links

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

containing block by appearing next to another one, it is floated down to a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line in order to more clearly illustrate the principle at work here). This rule first appeared in CSS2, to correct its omission in CSS1.

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high as possible.

Subject to the restrictions introduced by the previous seven rules, nearest block-level ancestor. This is true even in relative positioning, although it might not seem so at first.

  • For nonroot elements that are absolutely positioned using a position of absolute, the containing block is set to the nearest ancestor (of any kind) that has a position other than static. This happens as follows:

    Figure 9-6

    Figure 9-6. Defining a height by using an explicit bottom

    In this case, the height of the element must be90% the height of the containing block, since 100% -- 10% = 90%. This assumes, of course, that there have been nomargins, borders, or padding set for the positioned element;otherwise, the effective height would bedecreased, although the entire element (content, padding, borders,and margins) would still be 90% as tall as the containing block.

    Similarly, if we specifically declare a height but leave

    Figure 7-57

    Figure 7-57. Uneven padding

    It's a little tough to see the padding, though, so let's 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, the background of an element extends into the padding. As we discussed before, it also extends to the outer edge of

    Initial value