CSS Inheritance

19 July 2005

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">
  <p class="bar">
    Hello, world. This is a very short
    paragraph!
  </p>
</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">

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">

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, but we still have the option of using a preprocessor.

Preprocessor

The principle of a preprocessor is very simple. You use software to look through a file and replace tagged areas with variables. In effect you extend CSS to allow for OO-style inheritance using whatever syntax you desire. You then use your own software to generate regular CSS from your homebrew language.

This is a very simple (designed to be quick to write for the purposes of this example, not to be as simple to use as it could be) preprocessor written in Perl (so you will need to get Perl to use it). You can use it yourself, or simply take it as an example of how you might proceed in writing your own or finding one by a third party.

This isn't a particularly practical example, but it does show what can be done. This script outputs to standard output, so it can be piped into a file as desired.

#!/usr/bin/perl

# Tell Perl to warn me if I'm writing bad code
use strict;
use warnings;

# Define some values I might wish to use

my $main_foreground_colour = "black";
my $main_background_colour = "white";
my $highlighted_foreground_colour = "white";
my $highlighted_background_colour = "#000033";

# Define a set of property/value pairs I wish
# to use more than once.

my $box = <<END;
  width: 12em;
  margin: 0.5em;
  padding: 0.5em;
  border: solid 1px black;
END

# Then print the stylesheet using those variables

print <<END;
body {
  background-color: $main_background_colour;
  color: $main_foreground_colour;
}

.oddBoxOut {
$box
  float: left;
}

.evenboxOut {
$box
  float: right;
}
END