I used to do web programming instead of web designing. Therefore, I lack of skill in css style sheet. When my friend (web designer) told me that is a possible to assign more than one class in a html element, it was a great news for me.

It is pretty simple. I assume that you have some basic knowledge in HTML & CSS, then it will not be too hard for you to understand the concepts, take a look at the sample html code below:

<div class="class1 class2">Hello World</div>

The div element are assigned 2 classes, which are class1 and class2. Both of them separated by a space in the class attribute. You are sure to have questions when you reach here. I did! “What if both of them have a same style?” The answer is, the second class will always override whatever styles that they have conflict with from the first class.

Let’s take an example:

<style type="text/css">
  .class1 { background-Color: #f0f0f0; color:Red; font-size:10pt; padding: 10px }
  .class2 { color:Blue; text-decoration:underline; font-size:16pt; }
</style>

<div class="class1 class2">Hello World</div>

Result:

 

 

 

With this method, you can add more effects to elements without having to create whole new style for that element. I like to use multiple classes for things that I want to keep standard across my entire web site. Bear in mind that this method is not supported by old browser. So you have to make sure you list the more specific and important styles in the first class.

Cheers and happy CSS-ing!