Applying Multiple Classes

Applying multiple CSS classes is simple, just add your class name as normal but separate them with a space. You can add as many classes as you like to any HTML element.

<p class="large green serif">This text would be large, green and in a serif font</p>

You would then add a large and green styles to your CSS document;

.large {
   font-size: 2em;
}

.green {
   color: #94d321;
}

.serif {
   font-family: Georgia, "Times New Roman", Times, serif;
}


You could mix and match these styles like so;

Real Life Example

In a practical situation multiple classes can be a real time saver. For example, on the Realmac Software website we have a two column layout across many pages. If you inspect the source code for one of our pages you'll see something along the lines of;

<div class="column left"> ...left column content... </div>
<div class="column right"> ...right column content... </div>

This applies a column and a left or a right class to each <div>. The obvious advantage is that you can store styles that will be applied to both columns in the columns class and column specific styles in the left and right classes. For example;

.column {
   margin-top: 12px;
   width: 380px;
   margin-bottom: 20px;
   position: relative;
   z-index: 50;
}

.left {
   padding-right: 40px;
   float: left;
}

.right {
   float: right;
}


The column class sets the global styles, such as width and margins, which is applied to both the left and right columns. The individual left and right classes are then applied to the respective columns, giving us our two column layout.

Obviously there is more CSS involved to get our pages to display correctly (such as a clearer class) but this should give you a good idea of how multiple classes can help you out.

As a sidenote, I would have loved to have used the CSS 3 columns layout but it isn’t currently an agreed standard or supported by all browsers. This is one of the features I’m really looking forward to when CSS 3 becomes standardized and widely adopted. See an example.

Ready, Aim, Fire!

Another great feature of using multiple classes is the ability to make your CSS target elements which have both classes applied. For example, you may want to setup left and right classes so you could apply those to elements you wanted floated across your entire site, but you might want to add some extra styling to any left columns;

/* left column specific styles */
.column.left {
   padding-right: 40px;
}


This CSS will only be applied to elements that have both the column and left classes. That’s cool, but you may have noticed and wondered why I haven’t used this technique on the Realmac Software site…

Cross Browser Problems

Using CSS targeting for elements that have both classes applied does not work in Internet Explorer 6. IE 6 will apply all the styles to the last class you specify when using this technique. In our example above every element that had the left class added would have additional right padding, not what we intended!

Even with this slight IE 6 annoyance multiple classes can really be a time saver and something you should start using if you’re not already. You’ll just have to make a decision based on your audience as to whether you want to support IE 6 users and not use class targeting.

Further Reading

• CSS 3 Module: Multi-column Layout
• A List Apart - Introducing CSS 3 Multi-Column Module
• CSS3 Multi-column Layout in action

Categories: CSS, CSS 3, Multiple Classes, Techniques