Section 4.1. What Is Inheritance? | Dreamweaver CS3: The Missing Manual

4.1. What Is Inheritance?

In a nutshell , inheritance is the process by which CSS properties applied to one tag are passed on to nested tags. For example, a tag is always nested inside of the <body> tag, so properties applied to the <body> tag get inherited by the tag. Say you created a CSS tag style (Section 3.1) for the <body> tag that sets the color property to a dark red. Tags that are descendents of the <body> tagthat is, the ones inside the <body> tagwill inherit that color property. That means that any text in those tags<h1>, <h2>, , whateverwill appear in that same dark red color.

Inheritance works through multiple generations as well. If a tag like the or tag appears inside of a tag, then the and the tags also inherit properties from any style applied to the <body> tag.

Note: As discussed in Chapter 3, any tag inside of another tag is a descendent of that tag. So a tag inside the <body> tag is a descendent of the <body>, while the <body> tag is an ancestor of the tag. Descendents (think kids ) inherit properties from ancestors (think parents and grandparents).

Although this sounds a bit confusing, inheritance is a really big time-saver. Imagine if no properties were passed onto nested tags and you had a paragraph that contained other tags like the tag to emphasize text or the <a> tag to add a link. If you created a style that made the paragraph purple, 24px tall, using the Arial font, it would be weird if all the text inside the tag reverted to its regular, "browser-boring" style (see Figure 4-1). You'd then have to create another style to format the tag to match the appearance of the tag. What a drag.

Inheritance doesn't just apply to tag styles. It works with any type of style; so when you apply a class style (see Section 3.1) to a tag, any tags inside that tag inherit properties from the styled tag. Same holds true for ID styles, descendent selectors, and the other types of styles discussed in Chapter 3.