Understanding Inheritance

Streamlining your CSS file

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:

body {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
    font-size: 100.01%
}
p {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
    font-size: 80%
}
h2 {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
    font-size: 120%
}

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:

body {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
    font-size: 100.01%
}
p {
    font-size: 80%
}
h2 {
    font-size: 120%
}

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:

div {font-size: 80%;}

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.

div p {font-size: 100%;}

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.

Page 4 of 4

Previous Page