Inheritance

Inheritance is a key concept in CSS. Most style properties are passed down from parent to child elements, although margins do not inherit. Descendants of an element in the document tree inherit their parent's style properties. Suppose that you style all h1 elements to be red, as follows :

 h1 {color: red;}  <h1>Hiermenus <em>Central</em></h1> 

The word Central also would be red because it is a child of h1 .

Take Advantage of Your Inheritance

You can use inheritance to your advantage to save space. Instead of styling all elements individually, use the highest-level parent you can in the document tree. To style the entire document, use the body tag. For example:

 body {font-size: 1em; font-family: sans-serif;} 

All descendants of the body element will inherit this style, unless of course, you're using Netscape 4.

A Strange Inheritance

Unfortunately, Netscape 4 once again is quirky when it comes to interpreting some CSS rules. Netscape 4 does not consistently inherit styles into tables. Some authors work around this quirk by explicitly listing table elements in their top-level body declaration, like this:

 body, th, td {font-size: 1em; font-family: sans-serif;} 

Netscape 4 will (usually) use this style throughout the page, including tables. For a list of CSS rules Netscape 4 supports, see http://www.bobsawyer.com/nn4css.html and http://style.webreview.com.

Specific Is Slow

In CSS, specificity is the enemy of clean, fast code. Contrary to what your English teacher told you, being specific in CSS is much less efficient than being as vague and abstract as possible. The more general you can be in your rules and selectors, the fewer you'll need, and the smaller your files will be. Try to use a few global, simple element selectors to style your pages for maximum speed.

For more details on specificity weighting , see the CSS home page at http://www.w3.org/Style/CSS/.