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:

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

And turn it into this: 

img { 
	border: 2px solid #000;
}

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

Similarly, margin can be written as separate properties: 

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: 

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

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

The style declaration above could also be written as: 

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: 

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: 

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 is also a shortcut for either background-color, , or a combination of both, optionally combined with other background properties: 

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.

Further shortcuts

It is possible to follow a general property with a specific one to create exceptions. For example: 

h1 {
	padding: 2em;
	padding-left: 0;
}

Will create 2em padding for the >h1> element on all sides except for the left, where padding will be 0. Note the order of properties in the declaration.

It is also possible to specify pairs of properties at the same time: top combined with bottom, and left combined with right: 

a {
	padding: 1em 0;
}

In the example above, links will have padding of 1em on the top and bottom, and 0 padding on the left and right.

Alternatively, sides may be specified in a sequence. going clockwise: top, right, bottom, left. (It can be helpful to remember the word TRouBLe as a mnemonic.) 

h2 {
	padding: 0 5px 2em 10px;
}

Will provide padding for >h2> elements: none on top, 5px on the right, 2em on the bottom, and 10px on the left. Note that units of measurement can be mixed.

Finally, it is also possible to combine padding distances as { padding: top leftandright bottom; }. For example: 

div {
	border: 1px solid black;
	padding: 2em 0 2em;
}

…produces an internal space of 2em at the top and bottom of all <div> elements, and 0 on the left and right.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.