As we all know CSS files are very useful to reduce the amount of HTML we need to send to the browser. But that doesn’t mean our CSS files are now the place for bloated and unnecessary markup. Shorthand properties can be very useful to save a lot of space in your CSS files and to save you time on coding.

Box properties

One of the best places to save some space is margins & padding of boxes. You can use only one line of CSS to define margins or padding for a box. For example:

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

You can write as:

margin: 1px 2px 3px 4px;

If there are four properties shorthand order is: top, right, bottom, and left. Think of the analogue clock. Start at 12 (top), then 3 (right), then 6 (bottom) and finally 9 (right).

There are also some other tricks for combining values:

  • One value: works on all sides
  • Two values: the first value works for the top and bottom sides, and the second value is for the left and right sides.
  • Three values: top, right and left, bottom
  • Four values: top, right, bottom, left

For example:

margin: 2px 4px;

Sets the top and bottom margins to 2px and left and right to 4px. It’s worth mentioning that the above properties also work for padding and borders.

Background

You can save a lot of space when writing CSS for backgrounds.

background-color: #336699;
background-image: url("images/background.png");
background-repeat: repeat-y;
background-position: center top;
background-attachment: fixed;

All these properties can be combined into single background property:

background: #336699 url("images/background.png") repeat-y center top fixed;

Note: if you do not specify some values, default values for those properties will be used. Default values are:

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

Font properties

As you know there are a number of CSS font properties and of course, there are shorthands for those properties. For example:

font-size: 2em;
line-height: 2.5em;
font-weight: bold;
font-style: italic;
font-family: "Times New Roman", Times, serif;

You can write as:

font: italic bold 2em/2.5em "Times New Roman", Times, serif;

If you do not specify font size and font weight the entire font rule will be ignored. You don’t specify one of those and the browser will ignore the font rule. For example, the following doesn’t work because it lacks font family and/or font size:

/* This doesn't work */
font: italic bold;
 
/* This doesn't work */
font: bold "Times New Roman", Times, serif;
 
/* This works! */
font: 1.5em Verdana, Arial, sans-serif;

Borders

You can greatly simplify CSS you use for borders. With borders, you can get really complicated but we’ll stay simple and try to fully cover the greatness of borders in some other blog entry. Example:

border-width: 1px;
border-color: black;
border-style: solid;

You can write as:

border: 1px black solid;

It is also worth mentioning that shorthands used for box margins and padding can also be used for borders. For example:

border-color: #333333 #666666 #777777 #999999; 
border-width: 1px 2px 2px 1px;

Conclusion

CSS shorthand properties can be very useful and if you understand them they can save you a lot of time in making your CSS files your files will be smaller for download so it can also save you some bandwidth and enable your users to load the page a bit faster.

Just make sure you know what you did. 🙂