[Contents] [Prev page] [Next page] [Last page]

Inheritance of Styles

JavaScript Style Sheets uses parent and child elements, where an embedded element is the child of the element that contains it.

For example, in the following HTML text, the <BODY> element is the parent of the <H1> element which in turn is the parentof the <EM> element.

<H1>The headline <EM>is</EM> important!</H1>

In many cases, child elements acquire or inherit the styles of their parent elements. For example, suppose a style has been assigned to the <H1> element as follows:

<H1 CLASS="BOLDBLUE">The headline <EM>is</EM> important!</H1>

In this case, the child element (the <EM> element) takes on the style of its parent, so the word "is" will appear emphasized in the BOLDBLUE style. However, if you had previously set up a style that specified that the <EM> element should be displayed in red, then the word "is" would be displayed in red, since properties set on the child override properties inherited from the parent.

Inheritance starts at the top-level element. In HTML, this is the <HTML> element which is followed by the <BODY>.

To set default style properties, you can set up style sheets for the <BODY> element. For example, the following code sets the default text color to green:

<STYLE TYPE="text/javascript">

If you want an element or a piece of text to be displayed in a different color, you can specify a class or style that uses a different color, or explicitly set the font color.

A few style properties are not inherited by the child element from the parent element. Most often it is intuitive why this is not the case. For example, the background property is not inherited, but the parent element's background will shine through other elements by default.

[Contents] [Prev page] [Next page] [Last page]

Copyright © 1997, Netscape Communications. All rights reserved.