Sussex countryside

It's made my business run better! Get a 10% lifetime discount when you Sign up for FreeAgent

Use more than one CSS class

Posted in on 21 November 2006

With CSS, it's possible to use more than one class on any (X)HTML element. This is a useful technique that can help avoid CSS style sheet bloat. Here's an example that I used recently.

I wanted to style a photo with a pale grey border and align the image right. I also needed a margin of 10px, padding of 5px, and background color #FFF - to create a 'photo paper' type effect and move the image away from any adjacent text. This is the CSS rule:

.photo {
 margin: 10px;
 padding: 5px;
 background: #FFF;
 float: right;
 border: 1px solid #E0E0E0;
}

and the (X)HTML with my image attributes:

<img src="images/lime.jpg" class="photo" alt="Lime" width="250" height="188" />

Imaginatively, I called the class 'photo' and it does the job just fine. However, it would also be useful to have the same style rule but with the photo on the left. In the past, I might have created a new style rule (perhaps, called photo2?!) with most of the same styles. However, this leads to style rule duplication - and there's no need to do it. Instead, create a second rule like this:

.left {
 float: left;
 margin-right: 20px;
}

In this case, I assign a rule for floating left, and change the right hand margin a tad because it looks better on my page. Now, it's easy to switch an image from right to left by assigning multiple classes, 'photo' and 'left', to any image tag. Multiple classes on any element are separated by a space. Rules from the second class will take precedence over the first class. Like this:

<img src="images/lime.jpg" class="photo left" alt="Lime" width="250" height="188" />

In this case, the image uses the same style rules from class 'photo' but the two style rules from class 'left' also apply and override the float and right margin values. Therefore, the position and right margin for the second image will change. See the final example here.

This method can allow quick and simple changes, on images in particular, but can be used for any element where common rules apply in most cases - but where specific rules are used in some examples.

I like multiple classes because it allows me to have a 'CSS switch' for common page elements, like images, blockquotes, and paragraphs. Use multiple classes selectively with descendant selectors and you will soon be producing lean and mean style sheets that are easier for everyone concerned.

More: Further reading on class selectors

Related Posts

Comments

  1. Oliver

    Great! Just what I was looking for.
    Thanks!
    (Who could have known it would be so simple :P)

  2. Pete Barnett

    Hi!

    Like the site; and you won’t regret the move to Drupal!

    The concept of descendant classes hadn’t really struck as being a CSS use of multiple inheritance; I see it now! Thanks.

    Pete.

  3. Clive Walker

    @Pete. Actually, I use Textpattern for this site. I don’t use Drupal. Sorry!

  4. Lucks

    How about the performance of using more than one class instead of one?

  5. Clive Walker (Author)

    I would not expect there to be a significant impact on browser rendering speed by using a couple of classes on an element. Of course, taking this to extremes might cause a decrease in speed but I’m not advocating that here.

    Additionally, other factors [for example, the number of HTTP requests, image and script sizes] are probably more important if you want to improve overall page performance.

  6. Spidy

    Thank you. This is what I was looking for. Great tips

  7. Sudipta Mallick

    can you please give me a idea about “uses of more than one images in one class only through css” is it possible or not?

  8. Clive Walker (Author)

    @Sudipta: If you mean, multiple background images with CSS, this is a newish CSS3 property that some browsers now support. Try a search on Google or here is an article that includes a section on multiple background images.

  9. Amr Boghdady

    Just what I needed, thanks mate :)

  10. Supachet

    why user more one class? :)

  11. Clive Walker (Author)

    @Supachet: I hope I have explained why in the post

  12. saco termico

    The idea of this is to be able to extend the style without writting the same code for each element?

  13. Anand

    I think we can do the same by using jQuery addClass()and removeClass()functions. Can you plz let me know the differences in both and which one is better…?

  14. Clive Walker (Author)

    @Anand: If you are adding/removing classes as part of a jQuery method/function/script (JavaScript behavior), that’s fine. However, I wouldn’t use jQuery for the sole purpose of adding/removing classes. CSS is for styling/presentation whereas jQuery/JavaScript is for adding functionality/behavior.

  15. Gary Howard

    Just wanted to say thanks for this posting.
    I like some of the features of jQuery, but CSS still has the “stuff” for what I need to do.

  16. Amjad Miandad

    Thanks dear, it was much useful for me and solved one of my problem.

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.





Sponsors

Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!

Subscribe RSS Feed

RSS icon