Idiot Banter

Using Multiple CSS Classes

Posted By:

Matt

Posted On:

October 22nd, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

No Comments, Start The Conversation

I get the feeling that it might not be common knowledge that you can give HTML elements multiple classes and use those classes to target those elements using CSS. I find multiple classes useful in specific situations, they can really save on the amount of CSS you have to write if you use them properly. Here’s the HTML for multiple classes:

<div class="class1 class2 class3" id="id1"></div>

The code above has 3 classes separated by spaces. You’ll probably only usually use 2 classes at once. I’d use 2 classes in a situation where I need to apply one class that sets the font size, color and line height on a bunch of elements and I’d like a couple of them to also be a different color. One class has all of the formatting and the second class changes the color. This saves me writing 2 separate classes with all of the same properties.

The classes work the same as any class. Whichever one is called last or whichever one has the most specific selector is applied. Multiple CSS classes are a simple thing that will save you a bunch of mark up and make people ask "Can you do that? Its that legal?!".

Similar Posts:

• CSS Specificity
• CSS Selectors
• XHTML & CSS: The Complete Beginners Guide