Many CSS properties can be written in a shortened firm. Writing CSS "longhand" isn't wrong, it just takes more time… and with more writing comes greater opportunities for errors, more code to read through, and increased development time. Shortcuts are a good practice to incorporate in your CSS.

You've probably been using CSS shortcuts without knowing it: border is itself a shortcut. We often take this declaration:

1. img { border-thickness: 2px; border-color: black; border-style: solid; }

And turn it into this:

1. img { border: 2px solid #000; }

(Related: a useful illustration of how various browsers render border values.)

Similarly, margin can be written as separate properties:

1. div { margin-top: 3em; margin-right: 2em; margin-bottom: 1em; margin-left: 2em; }

Or as values proceeding from the top of the element's box and proceeding clockwise:

1. div { margin: 3em 2em 1em 2em; }

(To remember the order: think TRBL, trouble).

The style declaration above could also be written as:

1. div { margin: 3em 2em 1em; }

(Meaning: margin-top 3em, left and right 2em, bottom 1em)

If the margin-left and right values share the same value, and the margin-top and bottom have different values from those, but also shared between the two, you could write:

1. div#sidebar { margin: 3em 1em; }

(Meaning: margin-top and bottom 3em, margin-left and right 1em. You'll often see this used to center a div or other block element as margin: 0 auto; )

Finally, if all sides share the same value, you can simply write:

1. div#container { margin: 2em; }

It is possible to follow a general property with a specific one to create exceptions: for example, padding: 2em; padding-left: 0; will create 2em padding for the element to which it is applied on all sides except for the left, where padding will be 0.

background also has a shortcut: you'll often seen me use background as a shortcut for either background-color or background-image. This shortcut form can be taken further:

1. header { background: #777 url(assets/images/grid.png) no-repeat top right }

Meaning: background-color of grey, a background-image that is not repeated, and placed in the top right corner of the element to which it is applied.