Generalising

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.
selectors{property:value;}
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;}
H1{color:blue;}

• 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;}
H1{color:blue;}
H2, H3, H4{ color:green;}

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

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.