JavaScript Style Sheets

Communicator Pre-release 2


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

Inheritance of Styles

JavaScript-based Style Sheets use the notion of parent and child elements.

For example, in the following HTML text, the <H1> element is the parent element, and the <EM> element is a child of the <H1> 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.

Other style properties are likewise inherited.

Inheritance starts at the oldest ancestor, 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">
	document.tags.BODY.color="green";
</STYLE>

Any place where you want the text to be displayed in a different color, you can set up classes of styles or set styles for different kinds of elements.

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.