CSS Shorthand Properties

By Trenton Moss
2008-01-26


CSS background and lists

Background

Use:

background: #fff url(image.gif) no-repeat top left

...instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.

Lists

Use:

list-style: disc outside url(image.gif)

...instead of

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Tutorial Pages:
» CSS fonts
» CSS background and lists
» CSS margin and padding
» CSS borders
» Conclusion

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS » Cascading Style Sheets - CSS