JavaScript Style Sheets

Communicator Pre-release 2


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

Creating Style Sheets and Assigning Styles

There are several ways to specify styles using JavaScript-based Style Sheets. You can create external style sheets and link them into your document and you can create style sheets within a document.

You can specify specific styles for certain elements within a document. The following code indicates that all level one headings will be displayed in green.

<STYLE TYPE="text/javascript">
	document.tags.H1.color = "green";
</STYLE>

This kind of style specification is somewhat rigid. However, you can mix and match styles in a variety of ways. One way to specify styles that can be applied to some elements but not others is to set up classes of styles within a document, such as bold, blue style. Then whenever you want an element to be displayed in that style, you simply tell it what class of style to use. For example:

<STYLE TYPE="text/javascript">
	classes.boldBlue.all.color = "blue";
	classes.boldBlue.all.fontWeight = "bold"; 
</STYLE>
<P CLASS="boldBlue">This paragraph appears in bold, blue style</P>
<P>This should be in the normal document color<P>

You can define style sheets in the following ways:

Defining Styles With the <STYLE> Tag in the Header

You can use the <STYLE> tag within the header of a document to define styles for specified elements used in the document. For example, you could specify that all level one headings are blue, all blockquotes are red, all paragraphs are emphasized, and so on.

For example:

<HTML>
    <HEAD>
	<TITLE>A Grand Title</TITLE>
	<STYLE TYPE="text/javascript">
	    tags.H1.color = "blue"
	</STYLE>
    </HEAD>
<BODY>
<H1>This Heading is Blue</H1>

Specifying Styles for Individual Elements

Please note this functionality is not implemented in PreRelease 2.

You can use the STYLE attribute to specify a style for a particular instance of an element. For example, you can specify that a particular paragraph is green or a particular blockquote is bold. This approach mixes style with content with a corresponding loss of the advantages of traditional style sheets.

For example:

<BODY>
	<P STYLE="color = 'green'">This paragraph, and only this paragraph 
	    is green.</P>
	<P>This paragraph is in the usual color, whatever that may be.</P>
</BODY>

Defining Classes of Styles

You can define classes of styles by using the CLASSES attribute inside the <STYLE> tag. For example, you can define a class named greenbold. Whenever you want an element to be displayed in green bold, you can specify that the element is a member of the class greenbold.

For example:

<HTML>
<HEAD>
<TITLE>Title</TITLE>
	<STYLE TYPE="text/javascript">
	    classes.greenbold.all.color = "#00FF00"
	    classes.greenbold.all.fontWeight = "bold"
	</STYLE>
</HEAD>
<BODY>
	<H1 CLASS=greenbold>This heading is way too green</H1>

You can use the keyword all to specify that all tags within the class are affected by the style property, or you can selectively identify which elements can be members of this class. For example, the following code creates a class called red1. Only paragraphs and blockquotes can be displayed in this style:

<HTML>
<HEAD>
<TITLE>Title</TITLE>
	<STYLE TYPE="text/javascript">
	    classes.red1.P.color = "red";
	    classes.red1.BLOCKQUOTE.color = "red";
	</STYLE>
</HEAD>
<BODY>
<P CLASS=red1>This paragraph is in red</H1>
<P>This paragraph is in the default color, since it is not
 	a member of class red1.</P>
<BLOCKQUOTE CLASS="red1">Oh what a beautifully red quote this is.
</BLOCKQUOTE>

Defining Unique Styles with the ID Attribute

The ID attribute allows particular stylistic exceptions to be expressed. For example, you could have an element that is a member of a class, but has a slight change to the default style for the class, such as using a different color.

For example:

<STYLE TYPE="text/javascript">
	classes.style1.P.color = "red";
	classes.style1.all.lineHeight = 12;
	ids.1A.color = "blue";
</STYLE>
<P CLASS="style1">Wide red text</P>
<P CLASS="style1" ID="1A">Wide blue text</P>

Using Contextual Selection to Mix and Match Styles

You can use the pre-defined JavaScript method contextual() to specify criteria such as "all emphasized text inside level one headings should be displayed in green."

For example:

<HEAD>
    <STYLE TYPE="text/javascript">
	tags.contextual(tags.H1, tags.EM).color = "green"
    </STYLE>
</HEAD>
<BODY>
<H1>This is<EM>green, emphasized text</EM> but this is plain old 
	heading one text</H1>

This type of element selection process is known as "contextual selection" because it takes into account the context of the selectors to match. In the example above the search pattern matches if <EM> is a descendant of <H1>; that is, if <EM> is inside an <H1> element.

For another example, consider:

tags.contextual(UL, UL, LI).color = "blue";

In this case, the search pattern matches <LI> elements with at least two <UL> ancestors. That is, only list items that are two levels deep in an unordered list will match this contextual selection and thus be displayed in blue.

Contextual selectors can look for tags, classes, IDs or combinations of these, for example

tags.contextual(tags.DIV, tags.P).color = "green";
tags.contextual(classes.reddish.all, tags.H1).color = "red";
tags.contextual(ids.B34, tags.CODE).background = "blue";

The first selection criteria matches all <P> tags within a <DIV> tag. The second selection criteria matches all <H1> elements with an ancestor class reddish. The third selector matches all <CODE> elements that are descendants of the element with ID=B34'.

Defining Style Sheets in External Files

You can define style sheets in a file that is separate from the document, and then link the style sheet to the document.

The syntax for defining styles in external files is the same as for defining styles inside a document file, except that you do not need the opening and closing <STYLE> and </STYLE> tags. For example:

// external style sheet saved to file mystyles1
classes.boldBlue.all.color = "blue";
classes.boldBlue.all.fontWeight = "bold"; 
tags.H1.lineHeight="14";
tag.P.color="yellow";
// end of file

To use an externally-defined style sheet within a document, use the <LINK> tag to link to the style sheet.

For example:

<HTML>
<HEAD>
	TITLE>A Good Title</TITLE>
	<LINK REL=STYLESHEET TYPE="text/JavaScript"
	HREF="http://style.com/mystyles1" TITLE="Cool">
</HEAD>

Combining Style Sheets

You can use more than one style sheet to influence a presentation simultaneously.

This could be useful, for example, if you want to combine several partial style sheets to reduce redundancy:

<STYLE TYPE="text/javascript" SRC="http://www.style.org/punk"></STYLE>
<STYLE TYPE="text/javascript" SRC="http://www.style.org/funk"></STYLE>
<STYLE TYPE="text/javascript">
	tags.H1.color = "red"; /* override external sheets */
</STYLE>

For externally linked style sheets, the last one listed takes precedence over previously listed style sheets. So in this case, if punk and funk specify conflicting styles, then the styles defined in funk take precedence over styles defined in punk.

Locally defined styles take precedence over styles defined in the <STYLE> element and styles defined in external style sheets.

For example:

<STYLE TYPE="text/javascript">
	tags.H1.align = LEFT
	tags.P.color=blue
</STYLE>
<H1 ALIGN=RIGHT>I am a Right-Aligned Heading</H1>
<P STYLE="color=red">I am a red paragraph, although in general
 paragraphs in this document are blue.</P>

In general, local style values override values inherited from parent elements and more specific style values override more general values.



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

Copyright © 1997, Netscape Communications. All rights reserved.