As developers we should always be on the lookout for new and straightforward ways to speed up the coding process, especially the ones that make your code much more organized and cleaner. This will not only increase your coding speed, but you will greatly improve your work-flow as well.

Today, we will talk about one of the most simplest and sometimes overlooked ways to accomplish just this. By learning a few tricks in the form of CSS Shorthand. These shorthand techniques require some working knowledge of CSS and how it behaves with HTML.

Backgrounds

Let's start with one of the most simplest shorthands using the background property as an example. Instead of writing it this way:

background-image: url("bg.png");
background-position: top center;
background-repeat: no-repeat;

Write it out like so:

background: url(bg.png) no-repeat top center;

Padding

Padding is very important when working with CSS, it lets you "pad" elements with space in order from the top, right, bottom, and left sides. Let's say we wanted to set all padding values to 30px, it would normally be written like this:
#div {
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:35px;
}
Now, this is using shorthand?
#div {
padding:10px 20px 50px 45px;
}

The way we can remember how the order goes of which value is padding which side is by remembering the way a clock turns. Imagine a square, and begin to pin-point the sides moving in a clockwise direction: top, right, bottom, left

Borders

There exists three properties for the border property that touch base with style/color, and the width/height. Here's how we would pane out this property the traditional way:
#div {
border-width: 1px;
border-style: solid;
border-color: #f2f2f2;
}

Now on to the short way:

#div {
border: 1px solid #f2f2f2;
}

Just like the padding property, there's a certain order these properties are laid out when using the short-hand technique, we've outlined them above.

Fonts

The font shorthand technique can be a bit hard to memorize since you can insert numerous properties such as color, font-weight, height, style and more. This is the old-school way:
#div {
font-variant:large-caps;
font-weight:bold;
font-size:2em;
line-height:1.8em;
font-family:Helvetica, serif;
}
Now lets re-write this to:
#div {
font: small-caps bold 1em/1.4em 'Georgia' ,serif;
}

Margins

The Margin property is very similar to the Padding property, in fact, if you understood Padding, then Margins will be a jiff. Here's how we would write them the long way:
#div {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
The shorthand way:

#div {
margin: auto auto auto auto;
}
The properties (top, right, bottom, left) work counter-clockwise.

Outlines

Although the Outline property has pretty much stop being used due to little or now browser support. We still found the need to add it to the list, you never know who's using IE5 or 6 still. Long way:
#div {
outline-width: number+unit;
outline-style: (numerous);
outline-color: color || #hex || (rgb / % || 0-199);
}
This is the shorthand version:
#div {
outline:3px dotted gray;
}
What a difference, right? It's amazing how far we can compress CSS properties with shorthand techniques.

Color

A large number of designers still use hexadecimal over rgb or both to outline the color of a division, not of a difference except with hexadecimals you can shorten your CSS a bit more. In the example below, we can pretty much cut the property in half. We'll use the body as the example. This is how we would normally write it:
#body {color:red;}
h1 {color:#00ff00;}
p {color:rgb(0,0,255);}
Now we can re-write this to:
#body {
h1 color:#fff;
p color:#fff;
}
See the difference between the rgb and hexadecimal?

Lists

Being able to compress the CSS to create an even shorter and easier block of code is pretty easy. Here's how we would traditionally write it out:
#ul li {
list-style-type:square;
list-style-position:inside;
list-style-image:url(list.png);
}

Shorthand:
[code]#ul li {
list-style:square inside url(list.png);
}

Hope you've enjoyed this quick and easy guide displaying a few CSS-Shorthand techniques that will simplify the entire coding and development process. If you know of some more techniques then let us know in the comment below!