Apply Multiple CSS classes for a single element

Oct 15, 2013, by admin

You can apply multiple CSS classes to a single element by separating them with a space in your attribute. It’s a very useful trick with CSS which doesn’t limit your element to just one class. When I have started working with CSS few years ago, never realised that it can actually be done. But when tried with it, the result was amazing. Let me show you how this works is with an example:

  .setbackground{background-color:green;}
    .setfont {font-size:14px;}

Then you can make paragraph background color as green like below:

<p class=“setbackground”>The paragraph background color is set as green.</p>

and a paragraph font size set as 14 like below:

<p class=“setfont”>The paragraph font size is set as 14.</p>

Finally, you can make paragraph background green and paragraph font size 14 by assigning both CSS classes to the paragraph:

<p class=“setbackground setfont”>background color green and font size 14.</p>

As most of modern browser supported multiple CSS classes call, but still you need to cross-check all browsers.