Inheriting style classes

There are times that it would be useful to use an existing style class that you have already defined in CSS and add further style properties to it without actually modifying the original class. Those with programming experience will know this as 'class inheritance'. Unfortunately CSS does not offer us inheritance, but the folk at the W3C, who define how HTML works, have kindly left a door open for us.

You probably already know that HTML provides inheritance on a property by property basis. For instance, if an element has the text colour property set to blue, any paragraphs, spans, emphasized text, etc, contained in that element will inherit the blue text colour. In contrast, this article outlines a way for one style class to inherit the entire style attribute of another class.

Let's look at an example of how this can be done. For this example I have created a style that might typically be used for lists throughout a web site. I've called this style class MyListStyle and here is the CSS for it -

ul.MyListStyle { 
    margin: 1em 3em 2em 3em; 
    color: darkMagenta; 
    font-size: 1.2em; 
    font-style: italic; 
    font-family: Verdana,Sans-Serif; 
    list-style-type: square; 
}

and here is an example of the MyListStyle class in action -

  • I wandered lonely as a Cloud
  • that floats on high o'er Vales and Hills
  • When all at once I saw a crowd
  • a host of dancing Daffodils

Having created this class, I would like to create another type of list that I can use in secondary positions on my website that has a derivative style. Ideally it will inherit the MyListStyle styling so that, should the styling of the MyListStyle class be updated, my other secondary lists will be modified to match. This makes maintenance easier, simplifies the CSS and is much more elegant from a design perspective. Here is my Secondary class -

ul.Secondary { 
    font-size: 1em; 
    font-weight: bold; 
}

and here is how the Secondary class is used in an HTML element so that it inherits the properties of the MyListStyle class -

<ul class="MyListStyle Secondary">
    <li>I wandered lonely as a Cloud</li>
    <li>that floats on high o’er Vales and Hills</li>
    <li>When all at once I saw a crowd</li>
    <li>a host of dancing Daffodils</li>
</ul>

Notice that I have specified both class names, MyListStyle and Secondary, separated by a space. This causes the properties of MyListStyle to be invoked first followed by the properties of the Secondary class. If the Secondary class sets a property value already set by the MyListStyle class, the usual cascade stylesheet rules apply and the later value is the one that is used. The result looks like this -

  • I wandered lonely as a Cloud
  • that floats on high o'er Vales and Hills
  • When all at once I saw a crowd
  • a host of dancing Daffodils

The reason that HTML allows multiple class assignments like this is because it goes some way to providing class inheritance without breaking the horizontal architecture that makes the web so effective. The class 'primitives' - the basic style properties - are fully exposed and have not been abstracted into some sort of black box.