Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:04:10 PM

2.10. Summary

By using selectors based on the document's language, authors can create CSS rules that apply to a large number of similar elements just as easily as they can construct rules that apply in very narrow might decide to color it red. All that's needed is a class of warn on each paragraph that contains warning text (<P CLASS="warn">) and the following rule:

P.warn {color: red;}

In the same document, you decide that any links within a warning paragraph should be green. Thus:

circumstances. The ability to group together both selectors and declarations keeps style sheets compact and flexible, which incidentally leads to smaller file sizes and faster download times. Thanks to inheritance and the cascade, authors are able to create sets of interlocking rules which, taken together, result in sophisticated document styles. This is all thanks to the fact that CSS is very deeply bound to the structure of documents, and that it uses this structure to determine how rules are applied, which rules should apply, and what elements should assume styles from their ancestors.

Selectors are the one thing that user agents almost have to get right, because the inability to correctly interpret selectors pretty much prevents a user agent from using CSS. However, the cascade and inheritance are different stories, and there have been some flaws in how they're implemented. Navigator 4.x, for example, has a rough time with inheritance into tables, as well as other structures such as lists. You can clear up many of these problems by using very strictly correct HTML, but not all of them.

There are many CSS rules describing lengths, colors, or other things that can be expressed using specific units and values -- and this is the subject (and title) of the next chapter.



Library Navigation Links

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

element. The bottom of the aligned element's inline box is then aligned with the bottom of default text box. Thus, given the following markup, we get a situation such as that shown in Figure 4-35:

IMG.tbot {vertical-align: text-bottom;}
<P>Here: a <IMG SRC="tall.gif" ALIGN="middle"
ALT="tall image"> tall image, and then a <IMG SRC="short.gif"
CLASS="tbot" ALT="short image"> short image.</P>
Figure 4-35

Figure 4-35. Text-bottom alignment

repeat-x and repeat-y cause theimage to be repeated in the horizontal or vertical directions,respectively, and no-repeat prevents the imagefrom tiling in any direction.

By default, the background image will start from the top left cornerof an element. (We'll see how to change this later in thechapter.) Therefore, the following rules will have the effect seen inFigure 6-28:

This rule prevents floated elements from overwriting each other. Ifan element is floated to the left, and there is already a floatedelement there due to its earlier position in the document source,then the latter element is placed against the outer right edge of thepreviously floated element. If, however, a floated element'stop is below the bottom of all earlier floated images, then it canfloat all the way to the inner left edge of the parent. Some examplesof this are shown in Figure 8-31.

Figure 8-31

Figure 8-31. Keeping floats from overlapping