CSS Shorthand for Backgrounds

Another interesting piece of CSS is that certain properties have a shorthand equivalent. This occurs only with a handful of properties; background is one of them.

Shorthand properties combine the features of all related properties. In the case of ackground, this means that color, image, repeat, and attachment can all be combined into one rule using the background property.

To help you compare, Example 8-7 describes the styles for all the background properties.

Example 8-7. Longhand background styles

body {
          background-color: white;
          background-image: url(/images/010/lemon-slice.gif);
          background-repeat: no-repeat;
          background-attachment: scroll;
          background-position: right bottom;
}

The shorthand version equates to this:

body {background: white url(/images/010/lemon-slice.gif) no-repeat scroll right bottom;}

I created an HTML page with some mock text and applied the background styles using the shorthand version (see Figure 8-14).

Figure 8-14. Applying background properties using CSS shorthand.

CSS Shorthand for Backgrounds

Of course, either the longhand or the shorthand versions would have worked to achieve the same end.

QUANTUM LEAP: WHEN TO USE SHORTHAND

Shorthand CSS is extremely useful when you're trying to conserve file size. It also can make general management of your CSS easier. I tend to use it wherever I can, with few exceptions.

However, I have heard people (particularly those who work in professional web-development team environments) point out that shorthand is harder for novices to work with. Some team managers choose to author their CSS in longhand no matter what because they find that it can help cut down on errors and confusion when diverse skill levels exist within a team.

Table of Contents