Inheritance

One more preliminary concept, before we get down to the details of specifying styles. As we'll see in the pages that follow, style specifications for both linked style sheets and embedded style tags are made for various HTML elements like <p>, <h1>, <li>, <table>, and so forth. Some additional flexibility in styles can be gained through style inheritance. Inheritance means that you can specify additional classes of each element, and each class will inherit some of the style features of the basic element unless it specifically substitutes new values, or unless that feature is not inherited. (The table of properties indicates which are inherited and which not.)

Example

P
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvitica';
font-weight: bold;
font-size: 11pt;
color: #000066;
position: relative;
margin-left: 1cm;
}

produces a paragraph that looks like this...while

P.small
{
font-family: 'Arial', 'Sans-Serif';
font-weight: normal;
font-size: 8pt;
text-align: center;
}

produces a paragraph that looks like this.

To produce the basic paragraph, you would simply use a <p> tag, and to produce the small, centered paragraph, you would add the class=small attribute (<p class=small>). Note that general classes can also be declared, which can then be used with any HTML element:

Example

.note
{
font-size: 10pt;
color: #006600;
background: #FFFFFF;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}

With this class defined, a paragraph designated by <blockquote class=note> would look like this one. (The border will not be visible if you are using IE 3.x)

Note that only one level of classes is allowed: a P.note.red class won't work.

Special Classes for Links

You should also be aware of the pre-defined classes for the <a> tag:

A.link { color: #FFFF00 }
A.visited { color: #990099 }
A.active { color: #FF0000 }

If you want links and visited links to stand out with distinctive colors, as we are used to seeing on most web pages, then these classes must be specified in your stylesheets. And one further complication: the A.active class is not yet supported by Internet Explorer. This is unfortunate, as the active link can be useful for framed pages, where one frame contains contents for a section of pages (i.e. the change of color for the active link would automatically highlight the user's present location in the contents list, an effect that web designers generally have to achieve through complicated and inefficient means). Because the A.active class is potentially useful, though, I recommend putting it into your style sheets now, so that it will be there when the support arrives -- in the meantime, it won't do any harm.

There are some other pre-defined "pseudo-classes" for the first line and first letter of blocks, but these are as yet not supported by Internet Explorer.

Generally speaking, inheritance is a powerful shortcut to creating variations on a style, in the same way that inheritance allows object-oriented programmers to efficiently create variations of objects (creating style sheets is, in fact, a very simple form of object-oriented programming). There are a few occasions when inheritance can be nuisance, though, because certain properties get inherited when you don't want them to (we'll look at an example later).