CSS shortcuts combine cascading style sheets rules into one efficient line of code. If your web site uses large stylesheets, cutting down on the amount of CSS code can help your code to load and render faster.
Not all related CSS rules can be combined into a shortcut, but many of the most commonly used rules can be condensed into a single line. You do need to be aware that order in which you place the CSS values does make a difference. Also, CSS shortcuts should be tested in a range of browsers because CSS rules are not always interpreted the same. Internet Explorer 6 is very buggy when it comes to rendering CSS rules properly. You should test all style sheet code in all of the most popular browsers, including FireFox, IE6, IE7, Opera and Safari.
Fonts
Many font attributes can be combined into a CSS shortcut. Rather than using separate lines for font attributes like this:
.title
{
font-weight: normal;
font-size: 14px;
font-family: arial, sans-serif;
}
The font attributes can be combined into a single line of code:
.title
{
font: normal 14px arial, sans-serif;
}
Margins & Padding
Another common use of shortcuts is with margins and padding. Padding represents perimeter spacing inside a container or object, while margins set up spacing outside of a container or object. While you can set up padding for a content area like this:
#content
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}
It is much easier and more efficient to set all of the padding values with a single line of code, like this:
#content
{
padding: 10px 5px 20px 5px;
}
There is an easy rule to remember when using CSS shortcuts for margins or padding. The order of the values is like times on a clock and the values rotate in the same direction as a clock. The first position is the top at 12 o’clock, the second value is the right at 3 o’clock, the third value represents the bottom at 6 o’clock and the fourth value is the left at 9 o’clock.
The margin or padding shortcut can be be shortened further, although this does tend to confuse people a bit.
margin: 10px 20px 10px 20px;
Can be shortened to:
margin:10px 20px;
In this case, the first value represents both the top and the bottom, and the second represents left and right.
You can even take this one step further is you want the margin or the padding to be the same for the entire perimeter.
margin:10px;
If you do not want any margins or padding with a web object, you can set all of the values to zero. You do not need to use a unit of measure with a value of zero. The following removes all margins and padding.
margin: 0;
padding: 0;
Borders
Defining the way that borders display for a div container is one of my favorite CSS shortcuts. I use it all of the time for troubleshooting display problems by setting a one line CSS shortcut within a rule for a div container. Instead of:
.notice
{
border-width: 1px;
border-color: #c7c7c7;
border-style: solid;
}
You can simply use:
.notice
{
border: 1px solid #c7c7c7;
}
Background Images
One more common use of CSS shortcuts is with background properties for images. Background images are commonly used with pure CSS (table-less) designs.
#header
{
background-image:url(images/logo.png);
background-position:top;
background-repeat:repeat-x;
background-color:#c7c7c7;
}
Can be shortened to:
#header
{
background: #c7c7c7 url(images/logo.png) repeat-x top;
}