Inheritance in CSS

CSS Inheritance

An explanation of how inheritance works in CSS and why CSS doesn't need Object Oriented style inheritance.
Introduction

Many newcomers to CSS are confused by inheritance; this is often because they come from a background in object oriented (OOP) programming and expect CSS to work in a similar way.

This document attempts to explain CSS inheritance and present alternatives to OO-style inheritance to demonstrate why it is not necessary.
CSS Inheritance

CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.

For example, given this style sheet:

`.foo {
background-color: white;
color: black;
}

`.bar {
background-color: inherit;
color: inherit;
font-weight: normal;
}

And this HTML fragment:

div class="foo">

Hello, world. This is a very short
paragraph!

`div>

The background colour of the div element is white, because the background-color property is set to white. The background colour of the paragraph is also white, because the background colour property is set to inherit, and the background colour of the parent element (the div) is set to white.

The inherit value does not require that the parent element have the same property set explicitly; it works from the computed value. In the above example, the color property of the paragraph has a value of "inherit", but the computed value is "black" because it inherits.

This might seem like a lot of typing, but the default value for many properties is already inherit, and for most others (border for instance) you wouldn't usually want to inherit the parent element's value.

While on that line of thought, I'll point out that not all properties can be inherited.
Object Oriented inheritance

Many people ask on mailing lists and in newsgroups about CSS if it is possible to do something such as:

`.foo {
background-color: white;
color: black;
}

`.bar {
Some reference to the above style for .foo
font-weight: normal;
}

It isn't. A selector is just a selector, there is nothing special about classes. Things would get rather complex if you had .foo > .bar as the selector for a style you wanted to import, or multiple identical selectors.

I won't go into how CSS could be changed to allow such functionality, not only would there be a lack of support among today's generation of browsers (which are likely to be with us for a long time to come), but it isn't needed. CSS already gives us the tools we need.

There are several approaches we could take.
Multiple Classes

Making good use of classes will solve most problems. Take the example of having boxes of data floating on alternating sides of the canvas.

`.oddBoxOut {
width: 12em;
float: left;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.evenBoxOut {
width: 12em;
float: right;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

As you can see, many properties are duplicated in each definition, so it is obvious why somebody might want OO-style inheritance.

There is another solution though. Lets take a quick look back at the HTML specification:

` class = cdata-list[CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

So we can assign multiple class names to a single element? That means we can change the style sheet so it looks like this:

`.boxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.oddBoxOut {
float: left;
}

`.evenBoxOut {
float: right;
}

And then the HTML will look like:

`div class="boxOut oddBoxOut">div>

Grouping Selectors

A single style may have multiple selectors assigned to it through the use of grouping.

To revisit the previous example, we first simplify the HTML so we only mention the one class:

div class="oddBoxOut">div>

Then we assign the CSS we want to it, but we group the common property/value pairs.

`.oddBoxOut,
`.evenBoxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

`.oddBoxOut {
float: left;
}

`.evenBoxOut {
float: right;
}

These two techniques should solve most problems which people think can be solved with OO-style inheritance