CSS gives web designers the power to style many pages simply and to change the look of a whole site in one place. If you look at a site as a whole you can simplify your style sheets and make them smaller and easier to maintain.

Let's look at the basic structure of a rule to make the rest of the explanation easier to understand.
There are different types of selectors which I am not going into here except to say that you can have multiple selectors separated by a comma.

Try to think of all the elements that have properties in common. You can group these using multiple selectors, then be more specific where there are differences.

Method One:

H1, H2, H3, H4{margin:1em; color:green;}

These rules specify that:
  • H1, H2, H3 and H4 will all have 1em margin all the way around.
  • H2, H3 and H4 will be green.
  • H1 will be blue.

I could have done this another way such as

Method Two:

H1, H2, H3, H4{margin:1em;}
H2, H3, H4{ color:green;}

Method Three:
H1{margin:1em; color:blue;}
H2{margin:1em; color:green;}
H3{margin:1em; color:green;}
H4{margin:1em; color:green;}

They all give the same result.
Hopefully you can see that the first method is uses the least amount of characters yet it is still easy to understand. Method two is not bad but could blow out quickly with more properties.
The third method although it gives the same result, is the longest.

Inheritance and Initial Values

The CSS2.1 Property Index lists the initial values and if the property can be inherited.
Properties with initial values, don't need to be declared unless you are changing or overriding an inherited value.
Inherited properties don't need to be redeclared in the child element unless you are changing them.
Just being aware of inheritance and initial property values may help you to simplify your style sheets.

Browsers also specify default values for certain elements, that is why many tags have default or initial values that differ from the initial CSS property values.
Although the initial value for display is inline, the display value for a div is block.
The initial value for font-style is normal yet the font-style of an em is italic.
The Default style sheet for HTML 4 shows how most browsers render initial values of tags. Understand that each browser and version can set values differently in their default style sheet. That is why some people override much of it in their own style sheet.

Summing Up

Using what you know about inheritance, default style sheets used by browsers and initial CSS property values.

  • Leave those properties out of your style sheet that aren't needed.
  • Only target specific elements when you need to.

There will always be times when you need to be specific and target a specific element with your rules. Just try to limit them.

All good points. Thanks

All good points. Thanks Tony.

It's something we see a lot

It's something we see a lot on the forum where people repeat rules for every single element not realising they can set it once on a parent element and the styles will flow on down to its descendants.

Quote:There are different

There are different types of selectors which I am not going into here

I've been reading the attribute selector post in How To, very informative.

Newbie... in need info on good coding.

This is an important note for new persons in CSS. I have been coding HTML for some time and just started using CSS. I am slow to change so this was important text for me. Thanks for the info. -Keh.