Grouping HTML Elements

It is possible to group elements within your CSS. If you would like to style multiple elements using CSS it is important to note that you need to separate each element using a "comma , ". We generally separate not only using a comma but also leaving a space between the element and the comma.

For ease of reading and for troubleshooting we recommend that each "property" is placed on its own line when in production stage.

There are tools on the net which take out whitespace from CSS files, some of these tools remove the whitespace between the rules and remove any comments and this ends up that the selectors are directly behind each other.

Other tools place all of the properties within "{}" on one line. This is obviously a personal preference, we used to leave our styling as in the development stage, but nowadays to save file size we minimize / compact our style sheets.

In the following example we have grouped all headline tags and have given them all the same property:


h1, h2, h3, h4, h5, h6{ color: #FFFFFF; background-color: #000000; }

Please note that the last selector (h6) has no comma behind it.

The above example can be used for multiple elements and not just elements of the same tag type. Creating general styling for the majority or all elements is a good practice.

The following example shows what is meant:


h1, h2, h3, h4, h5, h6, p, blockquote, code, div, form{ margin: 0; padding: 0; }

Again the last selector (form) has no comma behind it.