To keep style sheets short and easy to edit, similar rules can be grouped together. This grouping provides 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 will apply the declaration to both 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;
}
h2 {
color: red;
background: black;
}
Grouped Selectors and Declarations
Both the selectors and declarations can be combined, resulting in a single rule. This method offers the most concise way to write these rules.
h1, h2 {
color: red;
background: black;
}
Rules should be grouped whenever possible to make the style sheet more succinct. This has a small performance benefit because concise rules reduce the size of the style sheet, which makes the CSS file load more quickly. Moreover, it is convenient to specify the properties in only one place, in case they have to be changed later. Additionally, grouping selectors with similar styles makes it easier to maintain consistency between them.