by Trenton Moss
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.
...instead of
font-size: 1em;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.
...instead of
background-color: #fff;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.
...instead of
list-style: #fff;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.
Four different values
Use: margin: 2px 1px 3px 4px ( top, right, bottom, left )...instead of
margin-top: 2px;Three different values
Use: margin: 5em 1em 3em ( top, right and left, bottom )...instead of
margin-top: 5em;Two different values
Use: margin: 5% 1% ( top and bottom, right and left )...instead of
margin-top: 5%;...instead of
margin-top: 0;The above rules also apply to padding and border (see below for more on border).
...instead of
border-width: 1px;Use:
border-right: 1px black solid...instead of
border-right-width: 1px;(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;You can achieve exactly the same effect by using:
border: 8px solid #336; About the author
This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy, Webcredible, to help make the Internet a better place for everyone. He very good at running CSS training and spends much of his time working on the world's most accessible CMS.
Send a comment about this article to editor@itwales.com.