CSS (Cascading Style Sheets) is a language used to describe the design style of a website. It is becoming more and more common for web designers to rely on CSS completely to define their layouts, eliminating the need for tables.

Below, you will find out all about CSS shorthand properties. These techniques can be used to keep your CSS code neat and shorter.

Padding & Margin Shorthand

CSS allows you to define all sides of a padding and margin in one line. This can save you a great deal of time and will make your code look much neater:

/* Instead of... */

padding-top:10px;
padding-bottom:20px;
padding-left:30px;
padding-right:40px;

margin-top:10px;
margin-bottom:20px;
margin-left:30px;
margin-right:40px;

/* ...you can use... */

padding: 10px 40px 20px 30px;
margin: 10px 40px 20px 30px;

/* The shorthand method works as follows: */

padding: TOP RIGHT BOTTOM LEFT;
margin: TOP RIGHT BOTTOM LEFT;

There’s another shorthand method which is even shorted. Say your top and bottom both have a padding of 20px and your right and left both have a padding of 30px. You could easily do this by writing the following CSS:

padding:20px 30px;

If you only write two values, your browser will assume that the first value is for both the top and the bottom and the second value is for the right and left.

What if you write three values like the following?

padding:20px 30px 10px;

In this case, your browser will still consider the second value to be the left and right. So using the code above, you would have 20px padding-top, 10px padding-bottom and 30px padding on either side.

Font Shorthand

The ‘font’ property is a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’ at the same place in the style sheet.

Say we have the following code:

font-size: 15px;
line-height: 20px;
font-weight: normal;
font-style: italic;
font-family: Verdana;

We could easily group all these values into one line:

font: italic 15px/20px normal Verdana;

You will need to know the order in which the properties are written:

font: STYLE VARIANT WEIGHT SIZE/LINE-HEIGHT FAMILY

If you want one of the properties to be the default, you can just leave them out. In other words, the following are all valid examples of the font property:

font: 1em Arial;
font: italic bold Verdana;
font: small-caps 20px/10px Tahoma; 

I suggest you play around with these properties to learn just how it works.

Border Shorthand

The border shorthand is one of my personal favorites and one I use constantly. Borders have three main properties:

border-width: 10px;
border-color: #FFF;
border-style: dotted;

We can easily group this into one line by using the following format:

border: WIDTH STYLE COLOR;

border:10px dotted #FFF;

We can do the exact same thing when specifying which side we want to style:

border-right:10px dotted #FFF;
border-top:15px dotted #FFF;
border-bottom:5px solid #000;
border-left:1px solid #FFF;

Easy, right? I recommend you start using this in your CSS straight away if you aren’t already.

Background Shorthand

The background shorthand is another one that I use quite regularly since the word “background” itself is quite long; using the shorthand can make your code much smaller.

Let’s take the following CSS:

background-color: #000;
background-repeat: x-repeat;
background-image: url(background.gif);
background-position: bottom right; 

With the shorthand property ‘background’, we can use the following format:

background: COLOR IMAGE REPEAT POSITION

That means we can replicate the code above using the following line:

background: #000 url(background.gif) x-repeat bottom right;

This might seem complicated but will definitely save you a lot of time down the line.

Lists Shorthand

Last but certainly not least, the lists shorthand allows you to put all list properties together.

A UL list usually has the following properties defined:

list-style-type: disc;
list-style-position: inside;
list-style-image: url(pointer.gif);

In CSS, the following format is used to put the above in one line:

list-style: TYPE POSITION IMAGE

So using the properties above, we can have:

list-style: disc inside url(pointer.gif);

This one I use less often but is still nonetheless a perfect way of minimizing code.

In Summary

Here are the 5 shorthand techniques you just learned:

It does take a while to get used to them but once you do, you will make your code much neater by writing less and grouping properties together.

As always, I suggest you try out the code above yourself – Try excluding certain properties and see what happens – That is by far the best way to remember what you learn!

Do you use CSS Shorthand properties? Anything you would like to add?