Grouping HTML Elements Within Your CSS

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 seperate each element using a "comma , ". I generaly seperate not only using a comma but also leaving a space between the element and the comma.

For ease of reading and for troubleshooting I reccommend 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 take out the whitespace 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, I leave my styling as in the development stages.

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

Example:

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 I mean:

Example:

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.

Website Design | Website Design Company | Web Development Get a beautiful website design. Studio Web is a results oriented web design & online marketing firm serving companies worldwide.

Sponsored Link