Introduction to CSS Shorthand

The border shorthand property

Syntax

border: border-width | border-style | color

Examples

p {  
 border: solid red;  
}

This will set the borders for p to a solid red line.

p {  
 border: 1px dotted #369;  
}

This will display a tiny blue dotted line around the paragraph.

The border-top, border-right, border-bottom, border-left shorthand properties

Syntax

border-top: border-width | border-style | color

These properties work the same as those described above for border. But as border does not distinguish between the four sides, these properties will let you set a style to a specific border.

Example

p {  
 border-right: 4px groove blue;  
}

The list-style shorthand property

Syntax

list-style: list-style-type | list-style-position | list-style-image

Examples

ul {  
 list-style: url("dot.gif") disc inside;  
}

In this example, lists will use the graphic file called dot.gif. If it's unavailable, lists will use 'disc'.

The background shorthand property

Syntax

background: background-color | background-image |  
background-repeat | background-attachment | background-position

We used background as the example in the introduction to this article.

Example

p {  
 background: url("bg.gif") gray 50% repeat fixed;  
}

As you can see, the background-image is set to bg.gif, and the background-color is gray. The background will repeat, but stays fixed. Only one position is given, so the value 50% will apply horizontally.

Applying CSS Shorthand

We've learned that the CSS shorthand properties are quicker and more efficient to use than standard CSS in many situations. But we've also seen that support for these CSS properties can vary across browsers, so be sure to check what technology your target audience uses before implementing CSS shorthand on your site. Be careful with shorthand, and of course, make sure your styles degrade gracefully for older and non-compliant browsers.

References

The SitePoint CSS Reference

http://reference.sitepoint.com/css/

The W3C's specs on CSS2

/#l#/http://www.w3.org/TR/REC-CSS2//#lt#/http://www.w3.org/TR/REC-CSS2//#nl#/

Webreview's Style Sheet Section

http://www.webreview.com/style/index.shtml

Stylemaster - CSS compatibility Chart

http://www.westciv.com/style_master/academy/browser_support/text.html