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.

Do share your thoughts and experience.

 

Written by Nikhil Malhotra


Hi! I am Nikhil Malhotra, a Web/UI designer and Front End developer. This is the area of my website where I share my knowledge in form of tutorials and articles.

 
This entry was posted in Code, Tutorials and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *