CSS: Group Declarations

CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.

So this:

body {font-size: 1em;}
body {font-family: arial, helvetica, sans-serif;}
body {color:#000000;}
body {background:#ffffff;}

Becomes this:

body {
    font-size: 1em;
    font-family: arial, helvetica, sans-serif;
    color: #000000;
    background: #ffffff;
}

Even better, use shorthand properties to abbreviate this rule even further, like this:

body{font:1em arial,helvetica,sans-serif;color:#000;background:#fff;}

This abbreviated form of specifying style is supported by most modern browsers. You can combine grouping of declarations with grouping of selectors to create even more powerful CSS rules.

Further Reading

CSS Home Page

From the W3C

CSS Optimization

Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.

Cascading Style Sheets, level 2 CSS2 Specification

The CSS specification, from the W3C. By Bert Bos et al.

CSS Support Charts

Eric Meyer. The master CSS reference grid.

CSS: The Definitive Guide

Eric A. Meyer, (O'Reilly, 2000). A great introduction to CSS which includes descriptions of these shorthand properties. See also Meyerweb.com.

CSS: Group Selectors

Grouping selectors with common declarations applies multiple selectors to the same declaration.

By website optimization on 19 Nov 2003 PM