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

Creating Style Sheets and Assigning Styles

There are several ways to specify styles using JavaScript Style Sheets.

You can create external style sheets and link them into your document or you can create style sheets within a document.

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 3.

You can use the STYLE attribute to specify a style for a particular instance of an HTML 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 property 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>
<P CLASS = GREENBOLD>I am a feeling a little green today. Perhaps it has 
something to do with standing on the deck of this sloop in such storm-
tossed seas.</P>
<BLOCKQUOTE CLASS = GREENBOLD>
So many green things everywhere I look. Green apples, green trees, green 
lawns, green hills. I shake my head and suddenly the green things 
vanish, and once again I see reality, a vast, never-ending landscape of 
sand dunes.
</BLOCKQUOTE>

Example results:


This heading is way too green

I am a feeling a little green today. Perhaps it has something to do with standing on the deck of this sloop in such storm-tossed seas.

So many green things everywhere I look. Green apples, green trees, green lawns, green hills. I shake my head and suddenly the green things vanish, and once again I see reality, a vast, never-ending landscape of sand dunes.

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.P.fontWeight = "bold";
    classes.red1.BLOCKQUOTE.color = "red";
    classes.red1.BLOCKQUOTE.fontWeight = "bold";
</STYLE>
</HEAD>
<BODY>
<P CLASS=red1>This paragraph is 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>

Example results:


This paragraph is red.

This paragraph is in the default color, since it is not a member of class red1.

Oh what a beautifully red quote this is.

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">
	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>

Example results:


This is green, emphasized text but this is plain old heading one text


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:

contextual(tags.UL, tags.UL, tags.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

The following selection criteria matches all <P> tags within a <DIV> tag:

contextual(tags.DIV, tags.P).color = "magenta";

For example:

<DIV>
<H3>Welcome to my Corner of the World</H3>
<P>Am I magenta? I should be!</P>
<P>I should be magenta too!</P>
<H4>I should not be magenta</H4>
</DIV>

Example results:


Welcome to my Corner of the World

Am I magenta? I should be!

I should be magenta too.

I should not be magenta.


The following selection criteria matches all <H1> elements with an ancestor class reddish.

tags.contextual(classes.reddish.all, tags.H1).color = "red";

The following selection criteria matches all <CODE> elements that are inside the element with ID=B34.

tags.contextual(ids.B34, tags.CODE).fontSize = 2;

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 mystyles1.htm
classes.BOLDBLUE.all.color = "blue";
classes.BOLDBLUE.all.fontWeight = "bold"; 
tags.H1.lineHeight="14";
tags.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.htm" 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, 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.textAlign = "left";
	tags.P.color=blue
</STYLE>
<H1 ALIGN="right">I am a Right-Aligned Heading 1</H1>
<P STYLE="color=red">I am a red paragraph, although in general
 paragraphs in this document are blue.</P>
<P>I am a blue paragraph, as is correct and proper.</P>

Example results:


I am a Right-Aligned Heading

I am a red paragraph, although in general paragraphs in this document are blue.

I am a blue paragraph, as is correct and proper.


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.