CSS - shorthand properties

Learn how to make your pages load faster using CSS shorthand properties for backgrounds, borders, colours, fonts, lists, margins, padding, and outlines.

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

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("test.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("test.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.



font: 1em/1.5em bold italic serif

...instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you're specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.



background: #fff url(image.gif) no-repeat top left

...instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.



list-style: disc outside url(image.gif)

...instead of

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Margin & padding

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values


margin: 4px 1px 3px 4px (top, right, bottom, left)

...instead of

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

Three different values


margin: 5em 1em 3em (top, right and left, bottom)

...instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values


margin: 5% 1% (top and bottom, right and left)

...instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value


margin: 1 (top, bottom, right and left)

...instead of

margin-top: 1;
margin-right: 1;
margin-bottom: 1;
margin-left: 1

The above rules also apply to padding and border (see below for more on border).



border: 1px black solid

...instead of

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


border-right: 1px black solid

...instead of

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

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at the following box:

Blank image, with light blue top and left borders, and dark blue bottom and right borders. The top and left borders are slightly thicker

These borders can be achieved with the following CSS command:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf



The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {  	list-style-type: square;  	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

header tag


For example, the H1 tag shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, font-size-adjust, and font-style properties have been assigned their default values.

H1 {  font-weight: bold;   font-size: 16pt;  line-height: 18pt;
font-family: Arial; font-variant: normal; font-style: normal;
font-stretch: normal; font-size-adjust: none }

Rewritten as a single, shorthand property, the same tag appears as follows:

H1 { font: bold 16pt/18pt Arial }  

When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.


CSS shorthand properties are great! They're a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing. Now we've learned that the CSS shorthand are quicker and more efficient to use in many situations.


Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508