Module 10 - Page 07 - Basic CSS Syntax: Defining Common Properties for Multiple Selectors (Grouping Selectors)

Basic CSS Syntax: Defining Common Properties for Multiple Selectors (Grouping Selectors)

You may want to define common properties for a group of individual selectors. Say, for instance, that you know that your H1, H2, and H3 tags are all going to be center-aligned and black, but they're all going to be different sizes. Instead of creating three separate declarations which repeat common properties again and again, you can assign those common properties to the tags by grouping the selectors together in a declaration, separated with commas.

Example:

h1, h2, h3 { text-align:center; color:#000000; }

You may then assign the specific, individual properties for each tag in SEPARATE declarations.

Example:

h1, h2, h3 { text-align:center; color:#000000; }
h1 { font-size:36pt; }
h2 { font-size:24pt; }
h3 { font-size:18pt; }

Example:

h2, p, td { color:#330000; }
h2 { font-size:24pt; }
p { font-size:14pt; text-align:right; }
td { font-size:12pt; text-align:center; }

Example:

h1, h2, p { text-align:center; }
h1, h2 { color:#660066; }
h1 { font-size:36pt; }
h2 { font-size:24pt; }
p { color:#000000; font-size:14pt; }

This kind of power can get you in trouble, however. You must be VERY careful NOT to repeat properties for the same tag within separate declarations. The following example would be WRONG:

h2, p { color:#000000; }
p { font-size:24pt; color:#330000; }

In the above example, I have repeated the color property TWICE for ordinary instances of the P tag, which could potentially confuse the browser. Don't do this!

Main Menu