Grouping - CSS Quick Syntax Reference Guide - page 5

Chapter 2

Grouping

To keep style sheets short and easy to edit, similar rules can be grouped together. This
grouping offers several ways to specify a set of related rules. For example, you can color
the text red and the background black for two header elements in four different ways,
as described in the following sections.

Ungrouped rules
Each rule can be written separately, which allows you to apply individual style rules to
each selected element.

h1 { color: red; }
h1 { background: black; }
h2 { color: red; }
h2 { background: black; }

Grouped selectors
The selectors can be grouped together by separating them with a comma. This grouping
will make the declaration apply to multiple selectors.

h1, h2 { color: red; }
h1, h2 { background: black; }

Grouped declarations
The declarations can be grouped together by separating them with a semicolon. All styles
within the declaration block will be applied to the selector.

h1 {
color: red;
background: black;
}