Part 6.1Shorthand CSS

Throughout the articles of this tutorial, there have been various mentions of shorthand CSS. This article will discuss what shorthands exist and how to use them in a somewhat broad overview.

This article is not a list of shorthand CSS properties but more of a beginner's guide

What CSS shorthands are

CSS defines several shorthand (or short hand) properties that make writing properties much quicker. A shorthand combination typical combines several different properties into the one property.

Not only do shorthands reduce the amount of text required in the CSS file and thus reduce size, but for certain properties they ensure ordering of properties.

Examples

Borders

With the CSS border property, a total of 3 properties were required for each side of an element thus requiring a total of 12 (3 × 4) properties in order to achieve a border on all side of the element - even if all sides are the same. However, there did exist a shorthand.

Before any shorthand CSS was applied, to utilise a 2 pixel orange solid border, 12 properties were given:

.borders{
	border-top-width: 2px;
	border-top-color: #f60;
	border-top-style: solid;
	border-left-width: 2px;
	border-left-color: #f60;
	border-left-style: solid;
	border-right-width: 2px;
	border-right-color: #f60;
	border-right-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #f60;
	border-bottom-style: solid;
}
                                

When a shorthand property was applied to each, this came to just four properties:

.borders{
	border-top: 5px #f60 solid;
	border-bottom: 5px #f60 solid;
	border-left: 5px #f60 solid;
	border-right: 5px #f60 solid;
}
                                

However, these four properties are identical therefore it would make sense to have a shorthand for them:

.borders{
	border: 5px #f60 solid;
}
                                

Backgrounds

Backgrounds are one such example of time-saving and ensuring the correct order. Knowing the shorthand makes creating backgrounds much easier and ensures that there is a fallback option for when background images are unavailable.

Background

#background-example{
	background-color: #f60;
	background-image: url('image1.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}
                                

To set a background takes 5 properties without shorthands. With a single shorthand property this can be condensed in to:

#background-example{
	background: #f60 url('image1.jpg') no-repeat center fixed;
}
                                

For a full list of CSS properties, take a look at Dustin Diaz's CSS shorthand list.