Introduction to Shorthand CSS

There are a variety of properties in CSS that can be shortened to reduce coding and load times – these are called Shorthand Properties. Below, I will outline the main players.

Shorthand Properties in CSS

So, you’ve written your CSS and it’s looking quite bloated, fortunately you can dramatically reduce this in some cases. When writing CSS shorthand, you have to make sure that it is written in the correct order. I will list the properties available and then show you how to write it in shorthand. Each property listed will be using the default values – in most cases you can miss a property out if it is only going to use the default value.

CSS Shorthand Properties

The Background Properties

element {
 background-color:transparent;
 background-image:none;
 background-repeat:repeat;
 background-position:top left;
 background-attachment:scroll;
}

The above is the order that each background property must be declared. You can merge this list into a shorthand list:

element {
 background:transparent url(../images/1.png) repeat top left scroll;
}

As you can see, the shorthand version is much cleaner and shorter. Instead of using none for the background-image property, I have linked an image called 1.png as an example. Also, as I was saying earlier, you can always miss out values that are going to stay as the default – you must still remember to do it in the correct order:

element {
background:url(../images/1.png) top left;
}

This will set 1.png as the background image and repeat it starting from the top left. The values top and left can also be declared as pixels, percentages and any of the following: top, bottom center | left right center. When declaring a position like this it must always be in the order of X then Y.

The rest of the shorthand properties work in a similar way. In that they must always be declared in the correct order and you can miss out any that you will keep as the default value.

The Font Properties

The font shorthand is probably the most difficult, and can be hard to remember the correct order to declare values.

p {
 font-style:normal;
 font-variant:normal;
 font-weight:normal;
 font-size:inherit;
 line-height:normal;
 font-family:inherit;
}

The above is the correct order to declare the properties and values, and this is how to merge that information to shorthand:

p { font:normal normal normal inherit/normal inherit; }

Here is an example using user-defined values:

p { font:italic normal bold 1.2em/1em Verdana, Geneva, sans-serif; }

As you can see, when declaring the font-size and line-height, you use a forward slash to separate them – don’t ask me why! I think this is where it gets confusing, but as long as you declare them all in the right order it will be fine.

The Border Properties

The border property is a strange one. The defaults are sort of unknown and may vary between browsers; this is why I recommend declaring every value. Here is an example of a border that goes round the whole element:

element {
 border-width:3px; /* Apparently that's the default! */
 border-style:solid;
 border-color:#000;
}

You can also get this even longer by declaring each side:

element {
 border-bottom:1px;
 border-bottom-style:dashed;
 border-bottom-color:#ff0000;
 border-top:1px;
 border-top-style:dashed;
 border-top-color:#ff0000;
 border-right:1px;
 border-right-style:dashed;
 border-right-color:#ff0000;
 border-left:1px;
 border-left-style:dashed;
 border-left-color:#ff0000;
}

There will be times when you’ll need to declare the different side separately, but you can still do this in shorthand.

element {
 border:3px solid #000;
}

The above is the shorthand to have a 3px solid black border all the round your element. You can also declare it like this:

element {
 border-top:3px solid #000;
 border-bottom:3px solid #fff;
}

This will only show a border on the top and bottom, with the declared values.

The Margin and Padding Properties

Margin and padding work in exactly the same way. In my example I will use margin, but rest assured you can just change it to padding and they will still have the same shorthand properties.

element {
 margin-top:auto;
 margin-right:auto;
 margin-bottom:auto;
 margin-left:auto;
 }

The above code will set the default margin values individually for each side. This can very simply be shortened to:

element {
 margin:auto;
}

The above sets the margin to auto for all four sides. If you have different values for each side, it needs to be declared like this:

element {
 margin:5px 10px 20px 15px;
}

The above follows the order of top, right, bottom, left, and must always be declared in that order. You can however miss off the last value for left if the left and right values are the same, so it’d look like this:

element {
 margin:5px 10px 20px;
 }

This will give your set your left and right margins to 10px each.

The List-Style Properties

A list and its styles can be declared like this:

li {
 list-style-type:disc;
 list-style-position:outside;
 list-style-image:none; /* If an image isn't found or declared the list-style-type will be used instead */
}

The shorthand for this is simply:

li {
 list-style:disc outside none;
}

To use an image as the bullet point you would simply write:

ul {
 list-style:circle outside url(../images/1.png);
}

Conclusion

I hope this will help you with your website design. In time there will be a variety of CSS3 shorthand properties, so when CSS3 has been finalised I will write a new list for you all! Let me know of any other tips or tricks you have to neaten up your CSS.