How to Use CSS Shorthand

The language of Cascading Style Sheets, or CSS, has become a real life-saver for web programmers who want to cut down on clutter. CSS programmers replace bulky HTML tags with a "style language" that uses much less actual coding to specify styles for an entire page or site. CSS shorthand takes the concept even further by letting programmers skip the lengthy declarations of properties for a named element and just write the desired states. Here are some ways programmers use CSS shorthand to get smaller page loads.

Difficulty: Challenging

Instructions

1. Use CSS shorthand for fonts. Instead of writing out "font-size", "font-family," you can just tap out a line like this: font em/1.5em italic sans serif

2. Utilize CSS shorthand for background. Again, you're skipping commands for color and other attributes. Your CSS line should look something like this: background: #fff url(image.gif) no-repeat top right

3. Create easy lists with CSS shorthand. The type, position, and image properties of a list can be changed in CSS shorthand, without listing them.

4. Apply CSS shorthand to margins and spacing. For margin settings, you can use a CSS shorthand line including integers for the four dimensions, and the unit px (pixels). Your CSS shorthand would look like this: 1px 2px 1px 2px. Alternately, you can make shorter CSS shorthand using just three or two numbers.

5. Use CSS shorthand for borders. Again, some aspects of borders, like width, color and style can be set using CSS shorthand commands similar to those above.

Tips & Warnings

• Leaving out a particular part of an element's properties makes the browser use a default. Be aware that any CSS shorthand that leaves out anything will result in default settings.