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
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.
font: 1em/1.5em bold italic 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-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
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)
Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely
none (i.e. no images) respectively.
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: 2px 1px 3px 4px (top, right, bottom, left)
margin: 5em 1em 3em (top, right and left, bottom)
margin: 5% 1% (top and bottom, right and left)
margin: 0 (top, bottom, right and left)
The above rules also apply to
border (see below for more on
border: 1px black solid
border-right: 1px black solid
(You can substitute right with
The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at this box:
The borders on this box 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
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 who can argue with that?
This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability consulting and knows an awful lot about the usability testing.09 dec 2003 - 2471