Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Use more than one CSS class

Posted on by Clive Walker in CSS Web Design

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

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

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments

  • 09 Jan 2007 10:36:38

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

  • 09 Aug 2007 04:18:02

    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.

  • 09 Aug 2007 08:54:40

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

  • 13 Aug 2009 08:45:10

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

  • 13 Aug 2009 09:25:14

    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.

  • 01 Feb 2010 22:05:01

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

  • 14 Jun 2010 14:09:09

    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?

  • 14 Jun 2010 14:29:23

    @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.

  • 25 Sep 2010 17:40:27

    Just what I needed, thanks mate :)

  • 03 Nov 2010 17:29:11

    why user more one class? :)

  • 04 Nov 2010 12:13:02

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

  • 15 Dec 2011 13:16:39

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

  • 22 Dec 2011 21:19:27

    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…?

  • 23 Dec 2011 09:28:31

    @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 Jul 2012 04:35:04

    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.

  • 11 Sep 2012 15:18:34

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

Comments are OFF for this post.

© 2024 Clive Walker