Understanding Inheritance

Setting a default color

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:

<style type="text/css">
body {color: #990000;}
</style>

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.

Figure 3. All elements are now colored in a red.

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:

h2 {color: green;}

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.

Figure 4. The h2 element is now green.

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

p {color: blue;}

Figure 5. the p element color is set to blue.

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.

Page 3 of 4

Previous Page

Next Page