Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:15:10 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 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 to the right, and allows other content (text or other images) to"flow around" the image. In the past, this was onlypossible with images and, in some browsers, tables. CSS, on the otherhand, allows any element to float, from images to paragraphs tolists. In CSS, this behavior is accomplished using the propertyfloat.


For example, to float an image to the right, you could use this 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.

of stylesheet will be used in the initial displayof the document. Thus, if you wanted to link in two style sheets withthe names basic.css andsplash.css, the markup would look like this:

<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css"><LINK REL="stylesheet" TYPE="text/css" HREF="splash.css">

This will cause the browser to load both style sheets, combine therules from each, and apply the result to the document (see Figure 1-3). We'll see exactly how the sheets arecombined in the next chapter, but for now, let's just acceptauto only for left-to-right languages such as English. In right-to-left languages, everything gets flipped around, so margin-left is forced to be auto, not margin-right. This is not so much an issue under CSS1 as it is in CSS2, which introduces properties related to writing direction.

If both margins are set explicitly, and width is auto, then the value of width( Just make sure your LINK comes before the@import statement.) You'll end up withsomething like this:

/* file 'link-styles.css' */        /* file 'import-styles.css' */H1 {margin-bottom: 0;}              H1 {margin-bottom: 0;}P {margin-top: -1em;}               P {margin-top: 0;}<LINK REL="stylesheet" TYPE="text/css" HREF="link-styles.css"TITLE="Linked"><STYLE TYPE="text/css">

Second, it's possible that you might want to override a certain style from an imported style sheet. Imagine that you're using a server-wide style sheet that floats images. On one particular page, you don't want those images to float. Rather than writing a whole new style sheet, you could simply place IMG {float: none;} in your document's embedded style sheet. Beyond this type of circumstance, though, there really isn't much call to use float:

There are many different types of software that you can write in Java to make use of XML. I have created 3 major categories to describe certain types of apps (that are currently popular) that are really well suited to the use of XML. This is by no means a comprehensive set of categories; you can create your own, and many more major categories will emerge as XML becomes more popular.

Client side - Graphical Java Applications