Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Cascading Style Sheets Part 2: Shorthand

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

There's something oddly satisfying about styling a heading using one line and 65 characters rather than nine lines and 128 characters. Such are the savings when you use CSS shorthand.

Shorthand is a way of minimizing the code required to define CSS styles. For example, rather than define the typographic properties of a heading separately, such as size, font, and weight, you can combine several properties into one font declaration. And when it comes to writing code, there is certainly a "less is more" school of thought, where economies such as these are credited with faster downloads and more efficient processing. On some level, though, concise code is a badge of honor for those who value attention to details and doing more with less. And this article is for those of us who are, shall we say, particular enough to enjoy the simple pleasures of CSS shorthand.

First, let's establish a terminology for discussing CSS code. Take a look at Listing 1:

Listing 1: Example of a rule

p { padding: 4px }

This line of code is called a rule, and is made up of a selectorp—and a declaration{ padding: 4px }. The selector identifies which document element should be styled by the property—paddingand value—4pxcontained in the declaration. So, a rule is composed of a selector and a declaration that contains properties and values (Listing 2):

Listing 2: Structure of a rule

selector { property: value }

Good? Great, let's move on.

Grouping

The fundamental concept behind CSS shorthand is consolidating multiple rules and declarations into one lean and mean style rule. For starters, instead of creating several rules to style one selector (Listing 3), combine multiple declarations into one rule, separated by semicolons (Listing 4):

Listing 3: Several rules for one selector

h1 { font-style: normal }
h1 { font-variant: small-caps }
h1 { font-weight: bold }
h1 { font-size: 1.2em }
h1 { line-height: 1.4em }
h1 { font-family: Verdana, Arial, sans-serif }

Listing 4: Declarations combined into one rule

h1
{
     font-style: normal;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.2em;
     line-height: 1.4em;
     font-family: Verdana, Arial, sans-serif
}

Note the different formatting in the above examples. When there is one declaration, the rule appears on one line. With multiple declarations, each rule appears on its own line. This visual demarcation is a convention to aid the readability of the code. If you're more into streamlining than readability, go ahead and collapse the rule into one line (Listing 5).

Listing 5: Multiple declarations collapsed into one line

h1 { font-style: normal; font-variant: small-caps; font-weight: bold; font-size: 1.2em; line-height: 1.4em; font-family: Verdana, Arial, sans-serif }

Another way to reduce code is to define shared property values for several selectors in one combined style rule. Suppose, for example, you want to use Verdana for all headings. Rather than define the font-family property for each heading level, define font-family for all headings in one style rule (Listing 6):

Listing 6: One rule for several selectors

h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif }

These grouping and combining methods are not shorthand per se, but they do result in more concise code. Next, we'll look at true CSS shorthand properties.

Shorthand properties

CSS provides several shorthand properties that allow you to define several properties within one shorthand property. For example, the font shorthand property allows you to combine text styling properties (see Listing 4, above) into one rule (Listing 7). (Note that the shorthand property names throughout the article link to corresponding definitions in the CSS2 Specification).

Listing 7: Text properties combined using font shorthand property

h1 { font: normal small-caps bold 1.2em/1.4em Verdana, Arial, sans-serif }

Similarly, the background shorthand property consolidates several background-related properties (Listing 8) into one rule (Listing 9):

Listing 8: Background properties

body
{
     background-color: #fff;
     background-image: url(bg.gif);
     background-repeat: repeat-x;
     background-attachment: fixed;
     background-position: left top
}

Listing 9: Background properties combined using background shorthand property

body { background: #fff url(bg.gif) repeat-x fixed left top }

The same method works using the border shorthand property (Listing 10, Listing 11) and the list-style shorthand property (Listing 12, Listing 13).

Listing 10: Border properties

h1
{
     border-width: 1px;
     border-style: solid;
     border-color: #000;
}

Listing 11: Border properties combined using the border shorthand property

h1 { border: 1px solid #000 }

Note: border defines border properties on all sides of a selector. To define border properties for specific sides, use the border-top, border-right, border-bottom, and border-left shortcut properties.

Listing 12: List properties

ul
{
     list-style-type: disc;
     list-style-position: outside;
     list-style-image: url(bullet.gif)
}

Listing 13: List properties combined using the list-style shorthand property

ul { list-style: disc outside url(bullet.gif) }

We can achieve additional savings by eliminating needless declarations. For example, in the list example, above, we don't need to define list-style-type since the list marker is an image rather than a generated bullet. Besides, "disc" is the initial value for list-style-type, as is "outside" for list-style-position. Properties that use initial values don't need to be declared since they are provided by default (Listing 14).

Listing 14: list-style shorthand property with unnecessary values removed

ul { list-style: url(bullet.gif) }

Margins and padding can also be defined using shorthand. Margins and padding define the space at the top, bottom, and sides of elements, and the shorthand method is common to both. Let's focus on padding for the sake of illustration. The style rule in Listing 15 contains a padding declaration for each of the four sides of the h1 selector.

Listing 15: Padding properties

h1
{
     padding-top: 20px;
     padding-right: 10px;
     padding-bottom: 4px;
     padding-left: 10px
}

We can use the padding shorthand property to declare all four properties in one rule (Listing 16):

Listing 16: Padding properties combined using the padding shorthand property

h1 { padding: 20px 10px 4px 10px }

Both margin and padding shorthand properties provide an additional method for condensing code when the property values are the same on different sides of the selector. Let's use the margin shorthand property for the next examples. When all sides share the same margin, only one value needs to be declared (Listing 17):

Listing 17: 10px margin on all sides of heading

h1 { margin: 10px }

When the top and bottom and the left and right sides share the same margin, two values need to be specified (Listing 18):

Listing 18: 10px margin at top and bottom, 8px margin on left and right

h1 { padding: 10px 8px }

And, finally, when the left and right sides share the same margin, three values need to be specified (Listing 19):

Listing 19: 10px margin at top, 8px margin on left and right, and 4px margin at bottom

h1 { padding: 10px 8px 4px }

And that's it for CSS shorthand properties. Take a look at Example 1 and Listing 20 to see shorthand properties in action. Note which properties are declared and which are omitted for additional savings.

Listing 20: CSS shorthand properties

body
{ 
     background: #ddede5 url(bg.gif) repeat-x;
     margin: 70px 18px 4px;
}

h1
{
     font: small-caps bold 1.4em/1.5em Verdana, Arial, sans-serif;
     border-bottom: 4px solid #7080ac 
}

ul
{ 
     list-style: url(bullet.gif);
     font: .85em/1.7em Verdana, Arial, sans-serif 
}

References

These code-cutting measures are guaranteed to trim lines off your CSS code, or at least gain you a character or two, plus the satisfaction of a job well done. Many others have written great tutorials on CSS shorthand: