Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:43:38 PM

2.6. Inheritance

Viewing a document as a tree is very important for one other reason: a key feature of CSS is inheritance, which relies on the ancestor-descendant relationship to operate. Inheritance is simply the mechanism by which styles are applied not only to a specified element, but also to its descendants. If a color is applied to an H1 element, for example, then that color is applied to all text in the H1, even the text enclosed within child elements clipped -- that is, cannot be seen -- but some way is provided to make the extra content available to the user. In a web browser, this would mean a scrollbar (or set of them) or another method of accessing the content without altering the shape of the element itself. One possibility is depicted in Figure 9-9, which could result from the following styles:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em;
overflow: scroll;}
Figure 9-9

Figure 9-9. Invoking a scrollbar with overflow

of that H1:

H1 {color: gray;}
<H1>Meerkat <EM>Central</EM></H1>

As shown in Figure 2-23, both the ordinary H1 text and the EM text are colored gray because the value of color inherits into the EM element. This is very likely what the author intended, which is why inheritance is a part of CSS.

Figure 2-23

Figure 2-23. Inheritance of styles

The alternative would be a hypothetical situation where inheritance does not operate; in that case, the EM text would be black, not gray.

Another good example of how inheritance works is with unordered lists. Let's say we apply a style of color: gray for UL elements. What we expect is that a style that is applied to a UL will be applied to its list items as well, and to any content of those list items. Thanks to inheritance, that's exactly what does happen, as Figure 2-24 demonstrates:

UL {color: gray;}
Figure 2-24

Figure 2-24. Inheritance of styles

Inheritance is one of those things about CSS that are so basic that you almost never think about them unless you have to -- rather like the way we tend to take the convenience of the highway system for granted until part of it is closed or otherwise rendered difficult to use. However, there are a few things to keep in mind about inheritance.

2.6.1. Limitations of Inheritance

As with any great thing, there are a few blemishes if you look closely enough. First off, some properties are not inherited. This may be for any number of reasons, but they generally have to do with simple common sense. For example, the property border (which is used to set borders on elements, oddly enough) does not inherit. A quick glance at Figure 2-25 will reveal why this is the case. Were borders inherited, documents would become much more "cluttered" unless the author took the extra effort to turn off the inherited borders.

Figure 2-25

Figure 2-25. Why borders aren't inherited

As it happens, most of the box-model properties, including margins, padding, backgrounds, and borders, are not inherited for this very reason.

Inherit the Bugs

Inheritance can be a tricky thing, unfortunately. Thanks to problems in various browser implementations, an author cannot always rely on inheritance to operate as expected in all circumstances. For example, Navigator 4 (and, to a lesser extent, Explorer 4) does not inherit styles into tables. Thus the following rule would result in a document with purple text everywhere outside of tables:

BODY {color: purple;}

Even that isn't quite true, as some versions of Navigator 4 will forget about styles altogether once a table has been displayed; thus, any text after a table, as well as the text within it, would not be purple. This is not technically correct behavior, but it does exist, so authors often resort to tricks such as:

BODY, TABLE, TH, TD {color: purple;}

This is more likely, although still not certain, to achieve the desired effect. Despite this potential problem, the rest of this text will treat inheritance as though it operated perfectly in all cases, since an exhaustive documentation of the ways and reasons it might fail could be a book in itself.

Library Navigation Links

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

UL {list-style-type: disc;}
UL UL {list-style-type: circle;}
UL UL UL {list-style-type: square;}

If this is so, and it's likely that it will be, you will have to declare your own styles to overcome the UA's styles. Inheritance won't be enough in such a case.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a child of A, which is in turn a child of a relatively positioned DIV. B was absolutely positioned, as was element A, using styles like these:

DIV {position: relative;}
P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;
margin-left: auto;}

Another word to use, if you don't like "collapse," is "overlap." Although the margins are not really overlapping, you can visualize what's happening using the following analogy. Imagine that each element, such as a paragraph, is a small piece of paper with the content of the element written on it. Around each piece of paper is some amount of clear plastic; this plastic represents the margins. The first piece of paper (say an H1 piece) is laid down on the canvas (browser window). The second (a paragraph) is laid below it and then