You will notice that after a while you are writing the same styles for different elements or want to use different styles for one element (or a group of elements for that part). Hence the practice of “grouping”.
You can group selectors, declarations or everything. Let’s say you want all your heading levels to have the same color. Instead of making a rule for each heading separate, you can group them like this:
H1, H2, H3, H4, H5, H6 {color: blue;}
Or maybe you want your paragraphs and just your heading level 4 to be blue? No problem:
3
H4, P {color: red;}
Okay, but i want my H1 to have blue text, Arial font, font-size of 18 pixels and with a red background. Now what? Do i have to write three times those rules with H1? Of course not. You’ll group your declarations like this:
H1 { font : 18px Arial; color: blu; background: red;}
Okay, now you know how to group selectors and declarations. Let’s mix all this into one single method of grouping. Let’s just group everything.
I want all of my headings to have a blue color with a red background and Arial font with a font-size of 18 points. Well, no problem:
