Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Like Mother Like Child: A Look at Inheritance in CSS

Last updated Oct 17, 2003.

By Molly Holzschlag

That we inherit certain features from our parents is a given. I look very much like my father did, and my coloring is more like his was as well. From my mother, I got a head of wild curly hair and my physical stature. Think for a moment what obvious features you've inherited from your parents—even your grandparents! If you have children, consider which features they've inherited, too. If there are any grandparent Web developers out there, well what a fantastic opportunity to see the power of inheritance in your family tree!

CSS inheritance is very much like genetic inheritance. Features from a parent can be—but aren't always—inherited by children or descendents further down the line. And, just as we refer to "family trees" in human relationships, in Web terms, document trees are the corollary.

Elemental Relationships

The HTML or XHTML document is where the relationships between elements are defined. Relationship types include:

  • Parent. The parent element is an element directly above another in the document tree (Figure 1).
  • Child. The child element is an element directly below another element within the document tree.
  • Descendant. A descendant element is a grandchild, great-grandchild or further descendent down the line.
  • Ancestor. An ancestor element is a grandparent, great-grandparent, or higher descendent within the tree.
  • Sibling. Elements that share the same parents are referred to as sibling elements.

In Listing 1 you'll find a simple document. It contains the required DOCTYPE declaration, head, title, and body elements along with some content and markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> 
<head>
<title>XHTML document</title>
</head>
<body>
<div id="content">
<h1>10 Steps to CSS Success</h1>
<p>10 Steps to CSS Success is a <strong>pain-free way</strong> to learn the fundamentals of CSS. The goal isn't to make you a great designer, or teach you to be an expert CSS author. Rather, you'll be given the tools and knowledge often missed by the many individuals who learn from books, online resources, and view source without gaining a more formal understanding of the complexities within CSS.</p>
</div>
</body>
</html>

Figure 1 shows the document as it displays in the Firefox Web browser.

Figure css02-01

Figure css02-01 Pre-style

In HTML and XHTML, the html element is considered the root element. As root, the html element holds the role of being the topmost ancestor within the tree—the element of html has no ancestors whatsoever, only descendants.

The head and body are children to the html element and as such are sibling elements. The title element is a child to the head element, and a grandchild or descendant element of the html element.

The body element has, in this case, one child, the div element with an id of content. The div element has two children, h1 and p (which are siblings as they share the same parent), and the p element in this case has two children, a strong element and an anchor element.

In Figure 2, I've created a simple visualization of this document tree. This should help further clarify the relationships within the document. For example, while the title element is a grandchild of the html element, and so is the div element, those elements are not siblings for they do not share the same parent.

Figure css02-02

Figure css02-02 HTML Document Tree

These elemental relationships, while important for a number of reasons, become critically important when you begin to apply CSS to them, once again demonstrating the inseparable relationship between CSS and its related HTML or XHTML documents. Understanding these relationships gives you the power to work with CSS and inheritance, making your CSS more effective and giving as much control to you as possible over the way you use CSS to present your pages.

CSS Properties and Inheritance

Once you've got an idea of what's in your document, you can begin applying style to it.

More commonly, you'll find that CSS designers begin by styling the body. This is a natural and reasonable approach because it is within the body element that all displayable content is contained anyway.

Since most (but not all) CSS properties are inherited, it makes sense to put a variety of defaults necessary for the entire page's presentation in the body. If the primary font family is Arial, setting the font to Arial in the body means that the font family will be inherited down the tree, and you can change the size or other features as you need to later on. The same is true for many other properties, including a background and foreground color. Any elements you don't provide other background and foreground color information for will inherit from the body. Listing 2 provides some CSS for the document that provides examples of these defaults.

body {
    font-family: Arial;
    background-color: #69c;
    color: #036;
}

Figure 3 shows what the results are when I link the style and XHTML. You'll notice now that every element has inherited the font-family of Arial as well as the foreground and background colors.

Figure css02-03

Figure css02-03 Inherited style

Regular readers will recall the first article in the series, Browser, Author, User in which I discuss the roles of various style sheets. The following issues relate to browser styling:

  • Sizing. Since no size has been applied to the font, the browser styles come into play. The fact that the h1 element is big, and the paragraph element is displayed in an appropriate size for a paragraph are due to the fact that the browser is assigning styles to these elements since no other style for sizing exists.
  • Strong element in bold. Since bold is the browser default style for any element marked up as strong, and I've provided no other style to contradict that, the browser applies a bold along with the font-family and color that's being inherited from the body element's style.
  • Link element blue and underlined. Again, without defining rules to customize my links, the browser is going to take the lead here and apply the browser styles for links, which include color and text decoration. Note that the link does, in fact, appear in Arial, because that style is being inherited.

By working your way through your document, you can see how easy it would be to streamline CSS by allowing those elements that can inherit features and do not require special styles to be styled higher up the tree.

You would then add styles for the specific elements as needed, but generally speaking, this can really reduce your CSS file size because you're not constantly re-writing rules. Rather, you're relying on inheritance to apply styles for you. The one caution is, of course, to know what will need to be styled specifically. As you've seen in this example, the browser style is stepping right on in wherever I've left a style undefined.

Uninherited Properties

There are specific properties in CSS that are purposely not inherited. They are mostly properties related to the box model, such as margins, borders, and padding.

Listing 3 adds margins, borders, and padding to the body selector.

body {
    font-family: Arial;
    background-color: #69c;
    color: #036;
    margin: 30px;
    border: 2px solid #036;
    padding: 10px;
}

Figure 4 shows that while these properties appear in the presentation, they only do so in relation to the body element, not to anything else. Otherwise, every single element would have a 2-pixel border around it, 10 pixels of padding, and a margin of 30 pixels.

Figure css02-04

Figure css02-04 Inherited and uninherited styles

In Figure 5, you can quickly see why the idea of allowing box-related properties to be natively inheritable could be a bad idea!

Figure css02-05

Figure css02-05 Box model madness!

We'd have constantly contracting or exponentially growing boxes that all share the same features, which in most designs would be quite a mess. CSS is pretty well-designed in this regard: The elements that typically shouldn't be inherited aren't, and it's left up to you to determine how to style those elements.

Growing Up

Understanding elemental relationships within the document, visualizing document trees, and understanding how CSS uses element relationships within the document tree to apply style rules via inheritance becomes part of the sophisticated CSS designer's toolkit.

As you work on CSS and are able to improve your markup, CSS and design skills, you can begin tapping into inheritance to make your CSS files much leaner, easier to manage, and more effective overall.