Grouping in Css

Another key principle for creating well-organized CSS is grouping. Consider the following CSS,
used to apply styles to the first three (X)HTML headings:
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
Note that aside from the selector, every rule is the same. The rules are using 13 lines and
are bloating the style sheet unnecessarily. Thankfully, the three rules can be grouped to save
space and keep things manageable:
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
That’s now just five lines! The three selectors (h1, h2, and h3) are grouped in a commaseparated
list, and this technique can be used to group any selectors with common values. If
later you should decide to treat h3 differently, simply remove it from the list and isolate the
h3 style.