Okay, I'm going to take a bit of a detour here from the "series-in-a-series" that I've been doing to quickly blog about an invaluable CSS trick that every designer needs to use as often as possible.

So here's the scenario: You have a blog that's going to have pictures in it.  The thing is, you want to be able to float the images either to the right or to the left with some margins applied.  Oh yeah, you also want to have, say, seven different border-color options.  And did I forget to mention that you also want different padding between the image and border?

What to do, what to do?  When I first started, I would have sat down and mapped out a class for each "scenario."  For example, for the left-blue-2px-bordered option, I would have created something like "img.leftbluetwoborder."  While this will, of course, work, it's not usable.  Who can remember "leftbluetwoborder", not to mention the 23 other similarly named classes?  So what's the alternative to this terrible mess?

Enter what I call "class overloading."  What is this?  Simply, it is applying more than one class to whatever you're applying classes to.  So if I have an image with "class='myimage'", with More >