How to Use Multiple CSS Classes

As per my belief regarding how important it is to keep things simple let’s see another way to make our life easier as front end developers. We will take a look at how we can add multiple classes on a single element.

It’s a very useful method as you don’t have to limit your elements to just one class.

Let’s see it in action –

Step 1: Set up the CSS

Create individual styles.
.box { width:400px; margin: 10px; line-height:200px; }
.border { border: 5px solid #b67600; }
.orangebg { background: orange; }
.fontsize20 { font-size:20px; }
.txtcolor { color:#fff; }
.textaligncenter { text-align:center }

Step 2: Applying the classes in our Html file

If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute.
<div class=”box border orangebg “>
<p class=”fontsize20 txtcolor textaligncenter”>This is just an example</p>
</div>

This is how it looks:

How to Use Multiple CSS Classes

Browser compatibility

All latest support this method. Even IE support till version 7 is good but IE 6 behaves differently. If you want support for IE 6, you can just fix it with conditional styles.