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.