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

1.5. Summary

In order to facilitate a return to structural HTML, something was needed to permit authors to specify how a document should be displayed. CSS fills that need very nicely, and far better than the various presentational HTML elements ever did (or probably could have done). For the first time in years, there is hope that web pages can become more structural, not less, and at the same time the promise that they can have a more sophisticated look than ever before.

In order to ensure that this transition goes as smoothly as possible, HTML introduces a number of ways to link HTML and CSS together while still keeping them distinct. This allows authors to simplify document appearance management and maximize their effectiveness, thereby making their jobs a little easier. The further benefits of improving accessibility and positioning documents for a switch to an XML world make CSS a compelling technology.

As for user agent support, the LINK element has been universally supported, as have both the STYLE element and attribute. @import didn't fare so well, though, being ignored outright by Navigator 4. This is not such a major tragedy, annoying though it might be, since the LINK element will still let you bring external style sheets into play.

In order to fully understand how CSS can do all of this, authors need a firm grasp of how CSS handles document structure, how one writes rules that behave as expected, and most of all, what the

This doesn't do much good, as you can see. The clippingrectangle extends up and to the left, but since there isn't anycontent there, the visual effect is the same as if the author haddeclared overflow-clip: auto.

On the other hand, it might be okay to go beyond the bottom and rightedges, but not the top or left. Figure 9-13 showsthe results of these styles (and remember, the dashed lines are onlyfor illustrative purposes):

"Cascading" part of the name really means.

Library Navigation Links

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

styled (such as anchors, which have their own color styles) to bered. This should not affect elements such as horizontal rules (HR ) or images. However, early versions ofExplorer did inherit colors onto HR elements,while they didn't allow the colors to inherit onto form elements.This is more of a problem with inheritance than it is with color, butunfortunately the problem is still there. In fact, even today it'spossible to find browsers that have predefined colors for things liketables, which prevent BODY colors from inheritinginto table cells: larger. Figure 7-16 shows the difference between collapsed and uncollapsed margins.

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Correctly implemented user agents will collapse the vertically adjacent margins, as shown in the first list in Figure 7-16, where there are 15-pixel spaces between each list item. The second list shows what would happen if the user agent didn't collapse margins, resulting in 25-pixel spaces between list items.

by the editorial offices of Meerkat Monthly.This specialist magazine examines the issues of raising a suricate ina domestic environment, away from others of its kind, and alsoprovides general information about the animals themselves. In aneffort to boost sales, the editors want to put a few articles onlineeach month.


This case study ends up using quite a few advanced styles and, assuch, may be beyond the capabilities of most older user agents. Negative margins

As was discussed in the previous chapter,negative margins can cause floated elements to move outside of theirparent elements. This seems to be in direct contradiction to therules explained earlier, but it isn't. In the same way thatelements can appear to be wider than their parents through negativemargins, floated elements can appear to protrude out of theirparents.

Let's consider once again a floated image which is floated to text, which is probably best described as "text that is not italic or otherwise slanted." The vast majority of text in this book is upright, for instance.

That leaves only an explanation of the difference between italic and oblique text. For that, it's easiest to turn to Figure 5-24,