CSS Shorthand Properties

One of the many great features of CSS is that you can use shorthand properties to reduce the file size of your CSS. By reducing the file size, you cut down on bandwidth and most importantly you increase the speed of your website loading times. Although both of these reasons are very minor, every bit of speed and size counts.

In this article, I will explain the differences between shorthand and longhand for five of the more common properties, which will be: padding / margins, borders, backgrounds, fonts and lists. Now one thing that you need to remember is that shorthand properties are not always the best solution to use, you’ll always need to way up the pros and cons before selecting the shorthand or longhand properties.

Padding and Margins

With paddings and margins, there are a number of different ways that you can define this shorthand. Instead of using different properties for top, right, bottom and left, such as the example below:

margin-top: 20px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

You can use just one property to do the same thing:

margin: 20px 15px 25px 5px;

Both of the above examples will produce exactly the same results.

How about if all of the margins were the same size, such as 10px, we would be able to reduce the code even further.

margin: 10px;

Lets now take a look at the following example:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

In the above example, we have the top and bottom the same and the left and right margins are the same, we can use the following shorthand to achieve the same results:

margin: 10px 15px;

There is also one other shorthand we can use with margins and paddings, lets take a look at the code below:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 5px;

This can be shortened using only three variables, when the right and left sizes are the same:

margin: 10px 5px 20px;

Note: I have used the margin property, but the same structure can be used for the padding property.

Borders

With the border property, you can also use shorthand properties to reduce your code, depending on if all of the borders are the same size or if they are different, you can save a fair bit of time by using the shorthand property. Take a look at the code below:

border-width: 2px;
border-style: solid;
border-color: #000000;

This can be shortened into one line of code using the following:

border: 2px solid #000000;

The above code is so much easier and efficient to use. What happens though if the border sizes are different? Well we can still use the shorthand code with the border-width property as seen below:

border: solid #000000;
border-width: 3px 1px;

The above will give a border at the top and bottom 3px wide and the sides 1px, with a solid black border.

Backgrounds

Lets no take a look at the background property. If written separately, there could be as many as 5 lines of the code to specify the background.

background-color: #FFF;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left 50%;

Wow, that is too much to write, we can condense the above into the following for the same results:

background: #fff url(bg.gif) no-repeat fixed left 50%;

By writing the code this way, it reduces the size by over 50%!

Fonts

When using the font shorthand property, there are two requirements that have to be used otherwise the font will not display correctly, these are: font-family and font-size. All other properties if not used will just default to ‘normal’. Lets take a look at the individual properties.

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 30px;
font-family: 'Times New Roman', Georgia, Serif;

The above can be written neatly in one line of shorthand code:

font: italic small-caps bold 2em/30px 'Times New Roman', Georgia, Serif;

As stated in the opening paragraph under ‘Fonts’, the minimum requirements for the font property to work will look like this:

font: 2em/30px 'Times New Roman', Georgia, Serif;

Anything less and the font property will not work.

Lists

The final shorthand property we will explain is the list-style property, although not as widely used as the above examples, it’s still good to learn the shorthand for this property.

list-style-type: disc;
list-style-position: outside;
list-style-image: url(bullet.gif);

This can be shortened to the following, with at least a 50% saving in size:

list-style: disc outside url(bullet.gif);

Conclusion

As can seen by looking at all of the above code, it makes sense to use CSS shorthand properties. Not only does it reduce file size but personally I feel that it is a much cleaner look than writing all the individual properties, however, we all code differently, so it is wise to find the style that suits you best…in the end the results are the same!