HTML and CSS —

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/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/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.

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.


Having Fun Yet?

Hopefully, you're having a bit more fun now that you can use color and images to spruce up your pages.

As you can see, CSS gives you so many more options for color management that it's not funny. Even more flexible is the way in which you can now manipulate images to create your designs via CSS, yet keep them separate from any inline images.

The CSS Zen Garden (http://www.csszengarden.com/) is a fantastic place to check out how images aren't used anywhere inline. All the fabulous images within that site are placed into element backgrounds and managed with the techniques learned in this tutorial.

Moving along, you're going to learn how to style your text effectively. I waited until after color and imagery because you can integrate both with your text.

I can't wait to see what you come up with!