Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:27 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

P.neg {margin-top: -50px; width: auto; margin-right: 10px;margin-left: 10px; border: 3px solid gray;}<DIV STYLE="width: 420px; background-color: silver;padding: 10px; margin-top: 75px;"><P CLASSS="neg">A paragraph.</P></DIV>

As we can see from Figure 8-22, the paragraph hassimply been pulled upward by its negative top margin, such that

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.

All of the code that you write (in your Java classes) might be considered the Java application layer. Other layers are the XML Parser layer, the XML source (that supplies the XML data that is necessary), and the persistence engine (where the data is actually stored and retrieved by the source).

Your code (in the Java application layer) has to make use of the DOM or SAX API and the XML parser in order to access the information in XML documents (that come from your source). The source might be responsible for pulling data from different persistence engines (relational or object databases) and even the web (dynamically generated websites that supply only XML data).

In your application layer, you can create many interesting Java applications. The apps can run on the server side or client side or both. They may have graphical user interfaces or they may be web based. When I use the word application or app in this chapter, I don't exclude Java applets; I mean application (or app) in the broad sense of the word, i.e., I mean it to describe a software system written in Java that solves a real-world problem.

3 Main categories

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.

Applies to

all elements

displayIE4 P/P IE5 P/Y NN4 P/P Op3 P/-

Used to classify elements into broad categories. The most popular value is probably none, which suppresses the display of an element altogether. Gratuitous use of display with a document type such as HTML can be dangerous, since HTML already has a display hierarchy defined. However, in the case of XML, which has no such hierarchy, display is indispensable.


Note that none of this applies to table elements. CSS2 introduces new properties andbehaviors for handling tables and table content, and these newfeatures behave in ways fairly distinct from either block-level orinline formatting. See Section 10.1, "Changes from CSS1" for an overview.

Next we find the HREF attribute. The value of this attribute is theURL of your style sheet. This URL can beeither absolute or relative, depending on what works for you. In ourexample, of course, the URL is relative. It could as easily have beensomething like

Finally, there is theTITLE attribute. This attribute is notoften used, but it could become important in the future. Why? It