Using multiple css classes for styling html elements

An underused but very powerful technique consist of using multiple css classes on some html elements. This is very useful for example when you have multiple items of the same type and want to have a consistent look with some variations between the items.

A standard widget

On the right of this page (at least if you are using a regular desktop browser) there are some widgets. They all have the same look but sometimes you might want some widgets to stand out from the other widgets. For the examples in this post, a widget consists of a headline represented by an h3.caption element, and some content represented by some p elements. Typical content for a widget can include lists and tables but we stick to paragraphs here for simplicity.

<div class="widget" name="example1">
<h3>Standard widget</h3>
<p>
Content for standard widget.
</p>
<p>
More content for standard widget.
</p>
</div>

And to create a very plain widget look, we use the following CSS code:

.widget{
  width: 240px;
  margin: 0px 0px 15px;
  border: 1px solid #000000;
  padding: 5px;
}
.widget h3{
  margin: 0 0 8px;
  padding: 0;
}

Using two css classes for an important widget

If one or more widgets are extra important we want to create a different style for them so they look like they are more important but still have widget-like apperance. To express that a widget is important we can add the class important to the widget, like this:

<div class="widget important">
</div">

This gives us the design from the standard widget as a starting point and the class important can be used to attach the important look. In this case, the important look is orange colors on a slightly blue background. Not very pretty bur this is a code sample, not a design sample. And to isolate this to important widgets from other important stuff we use a CSS rule that specifies the combination of the widget class and the important class.

.widget.important{
  border: 1px solid #FF5500;
  background-color: #F5F5FF;
  color: #FF5500;
}

This rule applies to div elements with the class widget and the class important. And since two classes are more specific than one, this styling will override the things we specified in the .widget rule. We will however keep the rules we haven't overriden (margin, padding, width) so we still have the same widget layout.

Getting more specific with a subtle widget

We can also use a double class specification to specify style on specific elements inside the div with two classes. For this example, we create a subtle widget with a grey look. But we want the headline to be more visible than the content so we use an extra rule for the h3 element.

<div class="widget subtle">
</div">

.widget.subtle{
  background-color: #DDDDDD;
  color: #666666;
  border: 1px solid #666666;
}
.widget.subtle h3{
  background-color: #FFFFFF;
  color: #333333;
}

The subtle widget rule looks like the one we created above for important widgets. The interesting part here is the h3 rule. This will apply to h3 elements within div elements that have the class widget and the class subtle. This syntax can be used to style any element within subtle widgets like unordered lists, tables, whatever we need. This enables us to create complete widget styles so any type of content can be used within a widget and look just right.

Why not use id's for the important and subtle widgets?

An id should only be used for a single element so that would work if you only have one important and one subtle widget. Maybe you have that just now, but by using classes instead you can add more important and subtle widgets later without writing any more CSS code.

Example code for his post