Understanding inheritance

Note: This article was written for Dreamweaver 8. However, the content in general is still valid for Dreamweaver CS5, even though screenshots may differ.

Certain properties in a cascading style sheet (CSS) inherit (read assume) the values of their parent. For example, if you have an h1 element that is colored black and that h1 element has a nested span within it, then by default the span will also be black—it inherits the color value from its h1 parent.

In this article you will discover how you can use inheritance to optimize your CSS file.

A document tree is very much like a human family tree—it contains parents, children, and ancestors that relate to each other as they would in your family tree. In the document tree, however, these relationships are represented by elements, such as lists, title elements, and paragraphs.

The sample files that accompany this article include a page called tree1.html; open this page in Dreamweaver Design view. It contains an unordered list, an h2 element, and a paragraph that contains an em element (see Figure 1).

Figure 2 shows the structure of the tree1.html document drawn as a document tree. You can see that each element on the page bears a relationship with the body element, while the p, ul, and h2 elements reside in their own family tree branches and bear no relationship to each other. The elements that show below each of these elements are related to their parent—em is a child of p and the li elements are children of the ul element. The h2 element is a bit of a lonely old soul having no relatives at all.

You can demonstrate how color is inherited by setting a color property and value against the body. If no color values have been set, then generally your text color will default to black. This is represented by the colored (black) boxes.

If you created a rule in your style sheet that looked like the following rule (in bold), then all elements within your page would inherit that color value:

Figure 3 shows the changes to the appearance of the document tree based on the tree1.html file after the previous rule has been set.

After a color has been set on the body element, it becomes necessary to set a color against an individual element in order to override the color value set on the body element. If you wanted to make the color of your h2 element green, then you would need to set that color against that element. You would, of course, do this by adding a new rule to your style sheet for the h2 element, for example:

When a value is specifically set against an element, it will override the inherited color. This enables your h2 element to show green as you requested. This does not affect any other elements as your h2 element does not have any children (see Figure 4). You can see this in the file tree2.html, which is also included in the sample files that accompany this article.

Let's make a change to the color of the p element; currently it inherits the default color of the body:

Open tree3.html and you will see that after you add the previous rule to your style sheet, the p element and the em element (which is a child of the p element) both become blue. This is specificity at work; the color value set against the p element is more specific than the color value set against the body element, so the color value against the p wins out. The em element within the p element then inherits the color from the p element, which is its parent element.

While all this color changing has been going on, your ul and li elements have remained unchanged. They are still showing the default color value that you declared on the body element. The reason these elements are still red is that they are not related to either the h2 or the p elements, so they remain totally unaware of the changes that have taken place elsewhere in your document. To affect the color of the ul and li elements you would need to specifically set a color value for them within their own rule in your style sheet.

See if you can change the color of the li elements to orange using the same technique that you have used to change the color of the p and h2 elements.

Many values you set in your CSS file for styling text will be inherited, although the padding, margin, and positional properties remain specific to the element they are assigned to. This means you can use inheritance to set line-height, font-weight, font-size, and font-family properties to optimize your CSS file, as you will see in the following section.

In the past, you may have created redundancy in your style sheet by setting values that are simply not required. Often such values could have been omitted and you could have let inheritance do all the work for you. Using inheritance benefits you in several ways—it reduces the size of your CSS file which in turn makes it easier to read, easier to debug, and easier to maintain. Let's look at an example of how you can optimize your CSS file by using inheritance to do the donkey work for you. The following style sheet contains a lot of redundant code:

Note: The odd font-size value of 100.01% set on the body element is to work around scaling issues at smaller sizes in some browsers.

The following optimized style sheet takes advantage of inheritance, and the file size is therefore drastically reduced:

In this example, the properties in the h2 and p rules have been drastically reduced in size. As you have now allowed the properties that inherit to do their job, you only had to adjust the text size in the p and h2 elements, each of which is scaling off the default body size. All the other values for p and h2 will inherit from the body rule; and you have already seen how you can override default values from the body element if you need to.

Font scaling can be a little tricky at times, especially if you are unaware of how the font size is calculated. In the previous example, you have a default size on the body and then you have scaled the p element to 80%, which means the p element will be 80% of the default size set on the body rule. 80% is the equivalent of 0.8em and is a good default size for your paragraph text.

If you had a div element in your page (as shown in the sample file tree4.html) and you had set the following font-size value for that div, then you would be in a little bit of trouble:

With the font size of 80% set on the div any p elements within it that div will have the font size decreased. The p element was originally scaling off the body which has a default value of 100.01%. Now the containing element, the div, has a default value of 80%; your p element will scale to 80% of 80%. This is quite a bit smaller than you would want.

You should try to avoid setting the font size in more than one location. If you do find it necessary to set a font size on a containing element such as a div, then you may find it necessary to increase the font-size value on elements contained within that div.

By using a descendant selector to increase your font size, you can increase the size of the text within any given element, in this case a div. A descendant selector will override the p element that you set earlier, because it is more specific.

Where to go from here

Now that you understand how you can use inheritance to your advantage you should read the "Understanding Specificity" article. This article explains how your rules are applied and how one rule is deemed to be more specific than another.