Useful CSS shorthand properties
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.
Font
Use:
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
Use:
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.
Lists
Use:
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
Use:
margin: 2px 1px 3px 4px (top, right, bottom, left)
...instead of
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px
Three different values
Use:
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
Use:
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
Use:
margin: 0 (top, bottom, right and left)
...instead of
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0
The above rules also apply to padding and
border (see below for more on
border).
Border
Use:
border: 1px black solid
...instead of
border-width: 1px; border-color: black; border-style: solid
Use:
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:
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
Conclusion
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?
Credits: This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and likes to offer CSS help whenever he can.
