CSS shorthand properties

CSS shorthand properties make your CSS file look cleaner, easier to edit, easier to type and it reduces the total file size.

The above image “CSS Shorthand – Saving you money every day” is obviously a parody of a “saving you time – saving you money” cliché, however, it does save you time, so it is essentially making you money.
This article is aimed at beginners who aren’t familiar with CSS shorthand.

What is shorthand?

CSS shorthand is a way of getting the job done while using less CSS properties.

The 5 CSS Shorthand properties I use in every single project I work on (In alphabetical order) are:

  • background
  • border
  • font
  • list-style
  • margin
  • outline
  • padding

Above is a list of all the shorthand properties, however I have crossed out the ones I don’t use often. I would say that margin and padding are probably the ones I use the most, which is probably because almost every element uses both of them. My second most used would be background, then border and finally font.

One important thing to remember about CSS shorthand is that the order is very important. If you mix up the order then it probably won’t affect the element the way you want it to.

Margin and Padding

Margin and padding are the most simple and also written in exactly the same way.

#example {
margin-top: 10px;
margin-right: 9px;
margin-bottom: 8px;
margin-left: 7px;

padding-top: 10px;
padding-right: 9px;
padding-bottom: 8px;
padding-left: 7px;
}

Shorthand:

#example {
  margin: 10px 9px 8px 7px;
  padding: 10px 9px 8px 7px;
}

It's actually very easy to remember - top, right, bottom, left. It goes in a clockwise direction. So try and remember 12 o'clock - 3 o'clock - 6 o'clock - 9 o'clock and you are set for margin and padding.
Other examples:

#example {
  margin: 10px 5px; /* 10px top and bottom and 5px left and right */
  padding: 10px 0 0 0; /* 10px top and 0 right, 0 bottom and 0 left */
}

Background

This is my favourite shorthand property. rgbA and multiple background options have been added in CSS3.

#example {
	background-color: red;
	background-image: url(../images/example.jpg);
	background-repeat: repeat-x;
	background-position: right bottom;
	background-attachment: scroll;
}

Shorthand:

#example {
  background: red url(../images/example.jpg) repeat-x right bottom scroll;
}

Border

#example {
	border-width: 2px;
	border-style: solid;
	border-color: black;
}

Shorthand

#example {
  border: 2px solid black;
}

Font

This is probably the most difficult CSS shorthand property to remember. I don't have a clever way of remembering this one, I've drilled it into my brain by using it so much.

#example {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 35px;
	line-height: 10px;
	font-family: Arial, Helvetica, Sans-Serif;
}

Shorthand:

#example {
  font: italic small-caps bold 35px/10px Arial, Helvetica, Sans-Serif;
}

Outline

Outline is to border as margin is to padding.

#example {
	outline-width: 2px;
	outline-style: solid;
	outline-color: black;
}

Shorthand:


#example {
  outline: 2px solid black;
}

List Style

In this example, the square will only be used if the example.gif is not loaded which, I think, is good practice.

#example {
	list-style-type: square;
	list-style-position: outside;
	list-style-image: url(../images/example.gif);
}

Shorthand:

#example {
  list-style: square outside url(../images/example.gif);
}

And that's it folks! All 7 of the CSS shorthand properties wrapped up into a one little article.
If you have any questions, feel free to ask me.

Any questions or comments?

  1. Pingback: CSS shorthand properties | CSS-Plus | Source code bank

  2. Chris Pierre says:

    As a Front End Developer I implement shorthand coding on a daily-basis, really great and improves productivity.