Introduction to CSS shorthand properties

Last Revision October, 2007.
Originally published by Sitepoint 2002-12-11

Shorthand properties?

Table of Contents:
Introduction to CSS shorthand properties

  1. font
  2. margin/padding
  3. border
  4. border-top, border-right,
    border-bottom, border-left
  5. list-style
  6. background

Note:
Since the original version of this article was first released by Sitepoint 5 years ago, much has happened in the browser world. Support for CSS2 shorthand properties among current browsers is superior. It almost renders the support charts for CSS shorthand elements irrelevant, and these will most likely be removed in future revisions.

One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several similar properties by using only one. If you know some CSS and used it on your web pages, you'll immediately see the benefit while reading this article. It will make you a much more efficient CSS coder by making edits faster and your CSS code shorter.

In order to get the most benefit out of this article, you should know the normal CSS properties and their values, they will be used here, but not extensively explained.

Browser support as indicated for every shorthand property is vague and only gives a general idea of the browser compatibility.

The basic Structure of CSS

Now let us have a quick look at a sample CSS rule to refresh our memory on the different parts of CSS and what they are called:

    _____________Selector
   |      _________ Property 
   |     |       ____ Value 
   |     |      |
   H1 { color: red }
        |________|
        Declaration

A CSS rule will often declare many properties. A shorthand properties will let us declare several properties at a time

Let us look at an example to have a better idea. To add CSS style to the body tag in HTML you can write this:

Regular CSS rules body {
background: url("bg.gif");
background-color: #003366;
background-repeat: repeat-x;
background-position: top left;
}

The above code is a common way of using CSS by happy coders all over the world. Now let's see what happens if we try to define the same style, but this time by using the background shorthand property instead. We use the property background and this makes us able to set values for all the above properties with more efficiency, in fact we're cut the code by more than half!

body {background: url("bg.gif") #036 repeat-x top left;}

So as you can see, there's plenty of room to make your CSS more efficient if you know how to put the shorthand properties to work.

Under each header in this article I present the shorthand in the same way as above. First the browser support will be indicated, then the syntax in which the shorthand is being used, and then an example with a short explanation

1. The font shorthand property

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support partial partial yes yes yes partial partial yes yes partial yes yes yes Buggy
Syntax font: font-style | font-variant | font-weight | font-size | line-height | font-family
p { font: strong x-large/110% "new century schoolbook", serif; }

In this example we have not defined font-variant, it will use it's default value, either by browser (os possible other CSS rules). The value x-large/110% refers to font-size and line-height respectively. Since both use size as value they are bundled together like this, font-size always being the first value defined. Quotes are used around the font-family value because of the spaces which tells the browser that these are all defining font-family even though there's a space in the value

2. The margin and padding shorthand property

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support buggy partial yes yes yes partial yes yes yes buggy yes yes yes no
Syntaxmargin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Note:
Even though IE support the shorthand property for padding, it has major problems with the implementation of the CSS Box Model. This means that Internet Explorer uses padding in a different way than other browsers, beware.

Examples:

p { margin: 2em }

In this first example all margins are set to 2em. When only one value is defined, it applies to all sides.

p { margin: 1em 2em }

In this example there are 2 values defined. CSS interprets this as the first one being value for the horizontal borders, top and bottom, while the second one is for right and left.

p { margin: 1em 2em 3em }

In this last example 3 values are defined. Margin-top is set to the first value, margin-left and margin-right are set to the second, and margin-bottom is set to the third.

When 4 values are defined, the top is defined first and then goes clockwise.

The rules for how shorthand padding works are the same as for margins.

3. The border shorthand property

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support partial partial yes yes yes partial yes yes yes buggy yes partial yes no
Syntaxborder: border-width | border-style | color

Examples:

p { border: solid red }

This will set the borders for p to a solid red line.

p { border: 1px dotted #369 }

This will give the paragraph a tiny blue dotted line around it.

4. The border-top, border-right, border-bottom, border-left shorthand properties

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support partial partial yes yes yes partial partial yes yes no yes yes yes no
Syntaxborder-top: border-width | border-style | color

These works the same way as border does. But since border does not distinguish between the four sides, these properties will let you set style to a specific border.

Example:

p { border-right: 4px groove blue;}

5. The list-style shorthand property

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support partial yes yes yes yes partial partial yes yes partial yes yes yes no
Syntaxlist-style: list-style-type | list-style-position | list-style-image

Examples:

ul { list-style: url("dot.gif") disc inside}

In this example lists will use the graphic file called dot.gif. If it is unavailable, it will use 'disc'.

6. The background shorthand property

  Windows Macintosh All Platforms Other
Browser IE4 IE5.0 IE5.5 IE6 IE7 IE4 IE4.5 IE5 Safari NS4 NS6 Opera 4-7 FireFox 1-2 WebTV 1
Support partial yes yes yes yes yes yes yes yes partial yes yes yes partial
Syntaxbackground: background-color | background-image | background-repeat | background-attachment | background-position

We used background as the example in the introduction to this article.

Examples:

p {background: url("bg.gif") gray 50% repeat fixed }

As you can see the background-image is set to bg.gif and the background-color is gray. The background will repeat but stays fixed. Only one position is given, so the 50% will apply horizontally.

Conclusion

Now we've learned that the CSS shorthand are quicker and more efficient to use in many situations. But we've also seen that support for this can vary. Be sure to check with your target audience. Be careful and make sure you style degrades gracefully.

Copyright © 2000 - 2024 Ove Klykken, All Rights Reserved.
Back to DoMedia hompage