George

Using multiple CSS classes on an element can be powerful, and a time-saver. Here’s a simple example, let’s say you want to add a class called red to make certain text elements stand out. Try this:

<span class="boldtext red">for sale</a>

In the sample above, the text “for sale” will have the class boldtext and red applied to it. Multiple classes can be really helpful if you start working on a site you didn’t write, and don’t have the time to map out the previous web dude’s CSS fully, or even if you are just in a hurry, or your stylesheet has grown so big over time you want to place it safe.

Looking around for my last CSS post about cross-browser transparency I ran into a post about 5 Cool CSS Tricks on BrightCherry.co.uk by a dude named Maruf which reminded me of some other cool CSS that I find useful. Here is one of those – CSS Shorthands.

CSS Shorthand

CSS can get quicker and easier to use if you know some of the shorthand properties (more CSS shorthand properties). For example you could code a background image and its placement like this:

CSS Shorthand for Background

.backgrnd {
background-image: url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
}

You could do it that way or you could use shorthand:

.backgrnd {
background: url(images/background.jpg)  top center  no-repeat;
}

CSS Shorthand for Font

.maxedoutfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}

You could do it that way or you could use shorthand:

.maxedoutfont {
font: Arial, Helvetica, sans-serif 12px/14px bold italic small-caps;
}

Note that, as Maruf mentioned in his post, you must specify at least the font-family and font-size. If you do not specify line-height, font-weight, font-style or font-variant then normal (the CSS defaults) will be used/inherited.