Multiple CSS classes for a single element

Posted March 21st, 2009 in HTML and CSS

A useful CSS technique is to apply multiple CSS classes to a single element; this is something I didn't know was possible when I first started with CSS several years ago and I often find people do not realise it can actually be done.

The easiest way to explain how this works is with an example. If we defined the following CSS classes:

.underlined {
    text-decoration: underline;
}
.red {
    color: red;
}

Then we could made an underlined paragraph like so:

<p class="underlined">This text is underlined.</p>

and a red paragraph like so:

<p class="red">This text is red.</p>

Finally, we can make a red, underlined paragraph by assigning both CSS classes to the <p> tag by space separating the class names:

<p class="red underlined">This text is underlined and red.</p>

And here's the above examples in action:

This text is underlined.

This text is red.

This text is underlined and red.

And yes, I know you should never ever call your CSS class names something like "underlined" or "red"; it was just easy to illustrate my examples with those names ;)