12.4.1.1. External, document-level, and inline JSS

<link href="styles.js" rel=stylesheet type=text/JavaScript>

The only real difference between this tag and the one for a CSS external style sheet is that the type attribute of the <link> tag is set to text/JavaScript instead of text/CSS. The referenced file, styles.js, contains JavaScript statements that define styles and classes that Netscape will then use to control display of the current document.

The contents of the <style> tag for JSS are quite different from those for CSS, however. For example:

<style type=text/JavaScript>
<!--
    tags.BODY.marginLeft = "20px";
    tags.P.fontWeight = "bold";
  // -->
</style>

First, notice that we use the standard JavaScript and HTML comments to surround our JSS definitions, preventing noncompliant browsers from processing them as HTML content. Also notice that the syntax of the style definition is that of JavaScript, where letter case does make a difference, among other things.

<p style="color = 'green'; fontWeight = 'bold'">

creates a green, bold-faced text paragraph. Notice first that you need to enclose inline style values within single quotation marks, not double quotation marks, as you might use for document-level and in external JSS styles. This is reasonable, since the style attribute value itself must be enclosed in double quotation marks.

Also note that inline JSS definitions use only the property name, not the containing tag object that owns the property. This makes sense, since inline JSS styles affect only the current tag, not all instances of the tag.

12.4.1.2. JSS values

In general, all of the values you may use for CSS may also be used in JSS definitions. For keyword, length, and percentage values, simply enclose the value in quotes and use it as you would any string value in JavaScript. Thus, the CSS value bold becomes "bold" or 'bold' for JSS document-level or inline styles, respectively; 12pt in CSS becomes '12pt' or "12pt" in JSS.

JSS URL values are strings containing the desired URL. Thus, the CSS URL value url(http://www.kumquat.com) becomes 'http://www.kumquat.com' for a JSS inline style; or "http://www.kumquat.com" at the document level.

One unique power of JSS is that any value can be computed dynamically when the document is processed by the browser. Instead of statically specifying the font size, for example, you can compute it on the fly:

tags.P.fontSize = favorite_font_size(  );

12.4.1.3. Defining styles for tags

document.tags.P.fontSize = '12pt';
document.tags.H2.color = 'blue';

These two JSS definitions set the font size for the <p> tag to 12 points and render all <h2> tags in blue. The equivalent CSS definitions are:

p {font-size : 12pt}
h2 {color : blue}

Since the tags property always refers to the current document, you may omit document from any JSS tag style definition. We could have written the previous two styles as:

tags.P.fontSize = '12pt';
tags.H2.color = 'blue';

Moreover, as we mentioned previously, you may omit the tag name, as well as the document and tags properties for inline JSS using the style attribute.

tags.p.fontsize = '12pt';
tags.Body.Color = 'blue';
tags.P.COLOR = 'red';

The correct versions are:

tags.P.fontSize = '12pt';
tags.BODY.color = 'blue';
tags.P.color = 'red';

It can be very tedious to specify a number of properties for a single tag, so you can take advantage of the JavaScript with statement to reduce your typing burden. These styles:

tags.P.fontSize = '14pt';
tags.P.color = 'blue';
tags.P.fontWeight = 'bold';
tags.P.leftMargin = '20%';

can be more easily written as:

with (tags.P) {
  fontSize = '14pt';
  color = 'blue';
  fontWeight = 'bold';
  leftMargin = '20%';
  }

You can apply similar styles to diverse tags just as easily:

with (tags.P, tags.LI, tags.H1) {
  fontSize = '14pt';
  color = 'blue';
  fontWeight = 'bold';
  leftMargin = '20%';
  }

12.4.1.4. Defining style classes

classes.bold.P.fontWeight = 'bold';
with (classes.abstract.P) {
   leftMargin = '20pt';
   rightMargin = '20pt';
   fontStyle = 'italic';
   textAlign = 'justify';
   }

The first style defines a class of the <p> tag named bold whose font weight is set to bold. The next style uses the with statement to create a class of the <p> tag named abstract with the specified properties. The equivalent CSS rules would be the following:

P.bold {font-weight : bold}
P.abstract {left-margin : 20pt;
            right-margin : 20pt;
            font-style : italic;
            text-align : justify
           }

Once defined, use a JSS class just like any CSS class: with the class attribute and the class name.

Like CSS, JSS also lets you define a class without defining the tag that will use the class. This lets you define generic classes that you can later apply to any tag. To create a generic style class in JSS, use the special tag property all:

classes.green.all.color = "green";

You can then add class="green" to any tag to have Netscape render its contents in green. The equivalent CSS is:

.green {color : green}

12.4.1.5. Using contextual styles

tags.contextual(tags.UL, tags.UL, tags.LI).listStyleType = 'disc';

defines a context wherein the elements (tags.LI) of an unordered list nested within another unordered list (tags.UL, tags.UL) use the disc as their bullet symbol. The CSS equivalent is:

ul ul li {list-style-type : disc}

You can mix tags and classes in the contextual( ) method. For instance:

tags.contextual(classes.abstract.P, tags.EM).color = 'red';

tells the browser to display in red <em> tags that appear within paragraphs that are of the abstract class. The CSS equivalent is:

p.abstract em {color : red}

Since the tags object is unambiguously included within the contextual( ) method, you may omit them from the definition. Hence, our nested list example may be rewritten as:

tags.contextual(UL, UL, LI).listStyleType = 'disc';