CSS Shorthand at a Glance

CSS is one of the simplest and most convenient tools available for Web developers. As you probably know, it’s a language for defining the formatting and visual presentation used in a website. We've used it maybe hundreds of times to define element positioning, colors, background images, fonts, margins and indentation. It offers a great deal of flexibility for controling the look of websites, just by using a single file (or sometimes more) attached to each Web document. That’s all well and good.

However, with this powerful tool at our disposal, we should try to get the most out of it, not only by building cross-browser style sheets, but by optimizing them in order to decrease significantly the size of CSS files, generating more efficient code for faster page downloads. The "byte-shaving" technique is one of the many approaches used for achieving cost-effective website acceleration.

Particularly, CSS offer great possibilities for using shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on websites, the benefits of using these shorthand properties are immediate. CSS shorthand makes it even easier for you to style your markup, and helps you turn out code that is a lot more compact and concise.

In this article, we’ll look at CSS shorthand properties, and give a short explanation about what each property actually does. Due to the diverse nature of browser support, I recommend that you check the browser manufacturer’s website in order to obtain detailed information about a buggy or partially supported particular property. A better bet would be to pick up a good book about CSS such as O’Reilly's CSS Reference, but there are any number of other choices out there, all perfectly good. So, let’s not waste any more time.