Use Grouping | Speed Up Your Site[c] Web Site Optimization

You can group selectors to apply the same style to multiple elements, and you can group declarations to apply multiple styles to one or more elements. Grouping is a great way to save space in style sheets.

Group Selectors

Suppose that you have multiple instances of headings (or any other element) that you want to style. Without CSS, you'd have to repeat style information within each header, like this:

 <h1><font color="green">Piet Mondrian</font></h1>  <h2><font color="green">Early Work</font></h2>

Using CSS, you could style these headers with multiple rules:

 h1 {color: green}  h2 {color: green} ... <h1>Piet Mondrian</h1> <h2>Early Work</h2>

When several selectors share the same declaration, you can save space by grouping them into a single rule by using a comma-separated list:

 h1, h2 {color:green;}  ... <h1>Piet Mondrian</h1> <h2>Early Work</h2>

Toward the latter part of his career, Mondrian grew to hate the color green. Changing his headings to red takes just one step:

 h1, h2 {color:red}

Note that although the semicolon separates declarations, it is optional for the final declaration of a rule.

Group Declarations

You can group multiple declarations for the same selector into one rule set, separated by semicolons. So instead of this:

 div { font-size: 1.1em }  div { font-family: arial, helvetica, sans-serif } div { color: blue } div { background: yellow }

Do this:

 div {        font-size: 1.1em;       font-family: arial, helvetica, sans-serif;       color: blue;       background: yellow; }

Even better, you can optimize this rule set further by using shorthand properties (such as font ) and removing whitespace. You'll learn about these techniques in the "Use Shorthand Properties" section.

Group Selectors and Declarations

You can combine these techniques in powerful ways to apply multiple declarations to multiple selectors. So instead of this:

 body {font-size: 1.1em; }  body {font-family: arial, helvetica, sans-serif;} th   {font-size: 1.1em; font-family: arial, helvetica, sans-serif;} td   {font-size: 1.1em; font-family: arial, helvetica, sans-serif;}

Do this:

 body, th, td {font-size: 1.1em; font-family: arial, helvetica, sans-serif;}

Or even better:

 body,th,td{font:1.1em arial,helvetica,sans-serif;}

Use Multiple Classes to Group Common Styles

Modern CSS2-compliant browsers can reference multiple classes within individual elements. For elements that use the same styles ( text-align:center , dimensions, etc.), you can create new classes for these common style declarations to save space. Here is an example:

 <style type="text/css">      ...     .center {text-align:center;} </style></head> <body> <div id="main" class="main center">...</div> <div id="nav" class="nav center">...</div>

Without the third " center " class, the " text-align:center " declaration must be repeated in both the main and nav classes. By using an additional class, you can group style declarations that are shared by multiple HTML elements into one class to save space.

You can take this technique to its logical conclusion by using DOM-compliant JavaScript to swap classes for individual elements. Here is an example:

 document.getElementById(id).className = "main common";

You can create sophisticated yet lightweight rollover effects by swapping classes to maintain state and change styles. For more details, see Eddie Traversa's articles on using multiple classes at:

http://www. webreference .com/authoring/style/sheets/ multiclass /

http://www.dhtmlnirvana.com/multimenus/