CSS Shorthand Properties

By Trenton Moss
2008-01-26


CSS fonts

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Font

Use:

font: 1em/1.5em bold italic serif

...instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you're specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

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