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.