Introduction to CSS shorthand properties

Shorthand properties?

One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one. If you have started learning about CSS and started implementing it on your web pages, you'll immediately see the benefit of using shorthand CSS properties. It makes it even easier for you to apply style to your markup, and it will make your CSS code shorter.

For you to have any value of this article you need to 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. For more detailed information about the nature in which a property is buggy or partially supported, check the link to Webreview and Stylemaster at the end of this article.

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. The shorthand properties will let us declare several properties by using a shorthand property.

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:

body { background: url("bg.gif"); background-color: #fff; background-repeat: repeat-x; }

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 a shortcut. 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 close to cutting the amount of code in half:

body {background: url("bg.gif") #fff repeat-x}

So as you can see, there's plenty of room to make your CSS more efficiant 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

p { font: x-large/110% "new century schoolbook", serif }

In this example we have not defined font-variant and font-weight, they will then use their existing values. 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 in the value.

Eric Meyer suggests keeping the order of which the different font properties are defined, strict, while O'Reilly's CSS reference however suggests that you can set these in any sequence.

2. The margin and padding shorthand property

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

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

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

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

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-2004 Ove A. Klykken, All Rights Reserved. Any use of this article without the authors written consent is prohibited.