Css shorthand is nice. We like it not just because it’s compact, but because it groups up attributes and makes it simpler to maintain and to modify your stylesheets. Nobody wants a 2000 line stylesheet.
Let’s take the border property for example, you’d like a box with a 3 pixel medium gray border. This could be written as:
.box {border: 3px solid gray;}
Let’s say you want paragraphs inside that box to have italic serif text with a lot of leading, that would be:
.box {border: 3px solid gray; font: italic normal 1em/2em georgia, “Times New Roman”, serif; }
some serif text with a lot of leading
Note that some of the properties will be required and some are not. For instance, the required attributes for font are: size, and font family (font family names are separated with commas, and compound names are bracketed with quotation marks).
In this example, all properties are shown, and those that are required are in bold:
font: italic small-caps bold 12px / 18px arial, helvetica, sans-serif; <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
I would recommend sticking to the order as described by the W3C. Some browser versions seem to be picky about this. You can skip any non-required properties.
Refer to the W3C documentation to confirm which are required for other classes. That’s it!