Class Inheritance

From Eric Meyer Cascading Style Sheets: The Definitive Guide, Second Edition

Classes inherit the style properties of their generic base tag. For instance, all properties of the plain P tag apply to a specially defined paragraph class, except where the class overrides a particular property.

Classes cannot inherit from other classes, only from the un-classed version of the tag they represent. In general, therefore you should put as many common styles into the rule for the basic version of a tag and create classes only for properties that are unique to that class. This makes maintenance and sharing of your style classes easier, especially for large document collections.

Translation - Style the basic element first with all of the properties you want associated with a tag. THEN create classes for special situations where a class would override one of more properties in the basic definition.

Here is a style sheet that defines a DIV element named "example". Inside the example DIV, there is a definition for the P tag... all P tags within the example DIV will display in blue.

The last rule is a class definition of "special" that allows one to attach the class of special to a specific paragraph. A paragraph within the example div which has a class of special will be displayed in red.

div #example {
   border: 1px dotted green;
   margin: 0 5% 0 5%;
   }
         
div #example p {
   color: blue;
   }
         
div #example p.special {
   color: red;
   }

Classes inherit the properties of their base tag.

The base tag should define as many of the common style rules as possible. In this example, the P tag is defined inside the DIV of "example".

All P tags within this "example" DIV are blue.

This paragraph has the "special" class which overrides the basic definition of the P tag inside this DIV of "example".