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

JavaScript Style Sheet Reference


Comments in Style Sheets


HTML Tags for New Elements


New Attributes For Existing HTML Tags


New JavaScript Object Properties


Font Properties for Tags, Classes, and Ids


Text Properties for Tags, Classes, and Ids


Block Level Formatting Properties for Tags, Classes, and Ids


Color and Background Properties for Tags, Classes, and Ids


Classification Properties for Tags, Classes, and Ids


Precedence Order for Tags, Classes, and Ids


Units


Comments in Style Sheets

Textual comments in style sheets are defined by JavaScript and are similar to those in the C and C++ programming language. For example:

tags.EM.color = "red"; /* red, really red!! */
tags.B.color = "blue"; // blue, really blue 

Comments cannot be nested.


HTML Tags for New Elements

<STYLE>

The <STYLE> and </STYLE> tags indicate a style sheet. Inside <STYLE> and </STYLE> you can specify styles for elements, define classes and IDs and generally establish styles for use within the document.

To specify that the style sheet is JavaScript, specify the TYPE attribute as "text/javascript". The default TYPE is CSS.

Use <STYLE> between <HEAD> and </HEAD>.

For example:

<HEAD>
    <STYLE TYPE="text/javascript">
	tags.BODY.marginRight=20
	tags.BODY.marginLeft=20
	tags.P.marginRight=20
	classes.class1.align="right"
	classes.class1.fontWeight="bold"
    </STYLE>
</HEAD>

<LINK>

Use the <LINK> element to link to an external style sheet to use in a document. For example:

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

<SPAN>

Use the inline <SPAN> and </SPAN> tags to indicate the beginning and end of a piece of text to which a style is to be applied.

For example:

<P>Here is some normal paragraph text. It looks OK, but would be much 
better if it was<SPAN style="color='blue' fontWeight='bold' 
fontStyle='italic'"> in bright, bold, italic blue. </span>Perhaps you 
will agree with me?</P>

You can use the <SPAN> element to achieve effects such as an initial dropped capital letter, for example:

<STYLE TYPE="text/javascript">
	classes.initDropCap.fontSize="12pt";
	classes.initDropCap.lineHeight = "12pt";
	classes.initDropCap.fontSize *= 2; // 200%
	classes.initDropCap.align = "left";
</STYLE>
<P><SPAN class="initDropCap">T</SPAN>his is ...</P>

New Attributes For Existing HTML Tags

STYLE

Note: The STYLE attribute is not implemented in pre-release 2.

The STYLE attribute determines a style for a specific element, for example:

<P STYLE="lineHeight='24'">

CLASS

The CLASSES JavaScript property allows you to define classes of styles. The CLASS attribute specifies to which class of style an element belongs. For example:

<HEAD>
<STYLE TYPE="text/javascript">
	classes.class1.H3.fontStyle="italic";
</STYLE>
</HEAD>
<H3 CLASS="class1">This H3 is in Italic style.</H3>

To specify that a style applies to all classes, use the element selector all. For example, the code sample below specifies that all members of the class lemon are yellow.

<HEAD>
    <STYLE TYPE="text/javascript">
	classes.lemon.all.color="yellow"
    </STYLE>
</HEAD>
<H1 class="lemon">A Nice Yellow Heading</P>
<P CLASS=lemon>What a nice shade of yellow this paragraph is.</P>

IDS

The IDS 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, for example, it uses a different color.

The IDS Javscript object allows you to create a unique style identification. The ID attribute specifies a unique style for an element.

For example:

<STYLE TYPE="text/javascript">
	classes.style1.P.color = "red";
	ids.A1.color = "blue";
</STYLE>
<P CLASS="style1">Wide red text</P>
<P CLASS="style1" ID="A1">Wide blue text</P>

New JavaScript Object Properties

tags

Within the <STYLE> element, you can set styles by using the tags property of the JavaScript object document.

For example, to specify that all paragraphs appear in red:

<STYLE TYPE="text/javascript">
	tags.P.color = red;
</STYLE>

The tags property always applies to the document object for the current document, so you can omit document from the expression document.tags. For example, the following two statements both say the same thing:

document.tags.P.color = "red";
tags.P.color = "red";

To set default styles for all elements in a document, you can set the desired style on the BODY tag, since all other elements inherit from BODY. For example, to set a universal right margin for the document:

tags.body.marginRight=20

classes

See the CLASS section for a discussion of the classes JavaScript property.


ids

See the IDS section for a discussion of the ids JavaScript property.


Font Properties for Tags, Classes, and Ids

Setting font properties will be among the most common uses of style sheets.

fontSize

Possible values:

absolute-size

relative-size

number

percentage

Initial value:

medium

Applies to:

all elements

Inherited:

yes

Percentage values:

relative to parent element's font size

absolute-size

relative-size

number

Note that length and percentage values do not take the font size table into account when calculating the font size of the element.

For most properties, length values refer to the font size of the current element. On the font-size property length units (for example, em and ex) refer to the font size of the parent element.

An application may reinterpret an explicit size, depending on the context. For example, inside a virtual reality scene, a font may get a different size because of perspective distortion.

Examples:

tags.P.fontSize = "12pt"; /* absolute size: be careful! */
tags.EM.fontSize = +1; /* the '+' is optional */
tags.EM.fontSize *= 1.50; /* increase font size by 150% */
tags.EM.fontSize = "1.5em";

fontFamily

Possible values:

fontFamily

Initial value:

the default font, which comes from user preferences.

Applies to:

all elements

Inherited:

yes

Percentage values:

NA

fontFamily

If the fontFamily is not available on the user's system, the default font is used instead.All of the font family names are platform-dependent, except for the generic family names. The generic family names are guaranteed to indicate a font on every system, but that exact font is system-dependent. The five generic font families are:

For example:

<STYLE TYPE="text/javascript">
tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>

fontWeight

Possible values:

normal

bold

bolder

lighter

100 - 900

Initial value:

normal

Applies to:

all elements

Inherited:

yes

Percentage values:

N/A

The font weight indicates the weight of the font. For example:

<STYLE TYPE="text/javascript">
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>

The possible values are normal, bold, bolder, and lighter. You can also specify boldness as a numerical value from 100 to 900, where 100 is the least bold and 900 is the most bold.


fontStyle

Possible values:

normal

italic

italic small-caps

oblique

oblique small-caps

small-caps

Initial value:

normal

Applies to:

all elements

Inherited:

yes

Percentage values:

N/A

The possible values are normal, italic, oblique and small-caps. The values italic and oblique can be combined with small-caps.

If the preferred font style cannot be accomplished, the rendering program makes its best effort to find an acceptable substitution. Often, an oblique font can be substituted by an italic font. If small-caps are not available, capital letters of a smaller font size can be used to render small characters if the resolution of the output medium is appropriate for this.

Examples:

tags.H1.fontStyle(small-caps, italic); //uses a helper method
contextual(tags.H1, tags.EM).fontStyle = "italic";

In the example above, emphasized text within <H1> elements appears in normal lower-case italic.


Text Properties for Tags, Classes, and Ids

The use of style sheets allows you to set text properties such as line height and text decoration.

lineHeight

Possible values:

number

length

percentage

Initial value:

depends on rendering program

Applies to:

block-level elements

Inherited:

yes

Percentage values:

refers to the font size of the element itself

This property sets the the distance between two adjacent lines' baselines. It only applies to block-level elements.

number:

	fontSize = "10pt"; 
	lineHeight = 1.2; /* lineheight is now 120%, ie 12 pt*/
	fontSize = "20pt";/* lineheight is now 20 pt, */

length:

	tags.DIV.lineHeight = "1.2em";

percentage

Negative values are not allowed.

For example:

	with(tags.DIV) {
	lineHeight = 1.2;
	fontSize = "10pt"; /* number */
	lineHeight = "1.2em;
	fontSize = "10pt"; /* length */
	lineHeight *= 1.20; /* 120% */
	fontSize = "10pt"; /* percentage */

textDecoration

Possible values:

none

underline

overline

line-through

blink

Initial value:

none

Applies to:

all elements

Inherited:

no, but see clarification below

Percentage values:

N/A

This property describes decorations that are added to the text of an element. If the element has no text (for example, the <IMG> element in HTML) or is an empty element (for example, "<EM></EM>"), this property has no effect.

This property is not inherited, but children elements should match their ancestor. For example, if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different color values.

For example:

	tags.BLOCKQUOTE.textDecoration = "underline";

The text decoration options do not include color options, since the color of text is derived from the color property value.


verticalAlign

Possible values:

baseline

sub

super

top

text-top

middle

bottom

text-bottom

percentage

Initial value:

baseline

Applies to:

all elements

Inherited:

yes

Percentage values:

refers to the line-height of the element itself

This property affects the vertical positioning of the element.

The following values indicate vertical positions relative to the parent:

baseline

middle

sub

super

text-top

text-bottom

The following values indicate positions relative to the formatted line that the element is a part of:

top

bottom

Using the top and bottom alignment, unsolvable situations can occur where element dependencies form a loop.

percentage:


textTransform

Possible values:

capitalize

uppercase

lowercase

none

Initial value:

none

Applies to:

all elements

Inherited:

yes

Percentage values:

N/A

This property indicates text case.

capitalize

uppercase

lowercase

none

For example:

	tags.H1.textTransform = "uppercase";

This example would put <H1> elements in uppercase text.


textAlign

Possible values:

left

right

center

justify

Initial value:

depends on rendering program

Applies to:

block-level elements

Inherited:

yes

Percentage values:

N/A

This property describes how text is aligned within the element.

Example:

	tags.P.textAlign = "center" 

Note that alignments are relative to the width of the element, not the canvas. If justify is not supported, the UA will supply a replacement. Typically, this will be left for western languages.


textIndent

Possible values:

length

percentage

Initial value:

0

Applies to:

block-level elements

Inherited:

yes

Percentage values:

refer to parent element's width

The property specifies indentation that appears before the first formatted line. The text-indent value may be negative, but there may be implementation-specific limits. An indent is not inserted in the middle of an element that was broken by another (such as <BR> in HTML).

length:

		tags.P.textIndent = "3em";

percentage:

		tags.P.textIndent = 50;

Block Level Formatting Properties for Tags, Classes, and Ids

JavaScript style sheets regard block-level elements, such as <H1> and <P> as boxes that can have borders, paddings, and margins.


marginLeft, marginRight, marginTop, marginBottom and margins()

Possible values:

length

percentage

auto

Initial value:

0

Applies to:

all elements

Inherited:

no

Percentage values:

refers to parent element's width

These properties set the margin of an element. You can set each margin individually by specifying values for marginLeft, marginRight, marginTop and marginBottom or you can use the margins() method sets the margins for all four sides at once.

The arguments to the margins() method are the top, right, bottom and left margins respectively.

tags.BODY.margins("1em", "2em", "3em", "2em");
/* top=1em, right=2em, bottom=3em, left=2em */

The example above is equivalent to the example below:

with(tags.BODY) {
	marginTop = "1em";
	marginRight = "2em";
	marginBottom = "3em";
	marginLeft = "2em";
	}

The margins express the minimal distance between the borders of two adjacent elements.

When margin properties are applied to replaced elements (such as an <IMG> tag), they express the minimal distance from the replaced element to any of the content of the parent element.

Negative margin values are allowed, but there may be implementation-specific limits.


paddingTop, paddingRight, paddingBottom, paddingLeft, and paddings()

Possible values:

length

percentage

Initial value:

0

Applies to:

all elements

Inherited:

no

Percentage values:

refer to parent element's width

The property describes how much space to insert between the border and the content (such as text or image). You can set the padding on each side individually by specifying values for paddingTop, paddingRight, paddingLeft and paddingBottom or you can use the paddings() method sets the margins for all four sides at once.

The arguments to the paddings() method are the top, right, bottom and left padding widths respectively.

tags.BODY.paddings("1em", "2em", "3em", "2em")
/* top=1em, right=2em, bottom=3em, left=2em */

The example above is equivalent to the example below:

with(tags.BODY) {
	paddingTop = "1em";
	paddingRight = "2em";
	paddingBottom = "3em";
	paddingLeft = "2em";
}

The surface of the padding area is set with either backgroundColor or backgroundImage properties.

tags.H1.paddings("1em", "2em", "3em", "2em"); 
/* top=1em, right=2em, bottom=3em, left=2em */
tags.H1.bgColor = "green";

Padding values cannot be negative.


borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, and borderWidths()

Possible values:

number

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

These properties set the width of a border around an object in pixels, points or em units.

You can set the border width on each side individually by specifying values for borderTopWidth, bottomRightWidth, borderLeftWidth and borderbottomWidth or you can use the borderWidths() method sets the margins for all four sides at once.

The arguments to the borderWidths() method are the top, right, bottom and left border widths respectively.

tags.BODY.borderWidths("1em", "2em", "3em", "2em");
/* top=1em, right=2em, bottom=3em, left=2em */

The example above is equivalent to the example below:

	tags.BODY.borderTopWidth = "1px";
	tags.BODY.borderRightWidth = "2px";
	tags.BODY.borderLeftWidth = "3px";
	tags.BODY.borderBottomWidth = "2px";

borderStyle

Possible values:

none

solid

3D

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

Sets the existence and style of a border around a block-level element.

To set the width of the border,use the border width attributes as discussed in borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, and borderWidths().


borderColor

Possible values:

none

colorvalue

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

Sets the color of the border. The color can either be a named color or a 6 digit hexadecimal value indicating a color.

For example:

<STYLE TYPE="text/javascript">
tags.P.borderColor="blue";
// a pinkish color
tags.H1.borderColor="#FF0000";
</STYLE>

width

Possible values:

length

percentage

auto

Initial value:

auto

Applies to:

block-level and replaced elements

Inherited:

no

Percentage values:

refer to parent element's width

Determines the width of the element. This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is enforced by scaling the image if necessary . When scaling, the aspect ratio of the image should be preserved if the height property is auto.

Example:

	ids.first-image.width = 100;

See Format Properties for Block-Level Elements for a description of the relationship between this property and the margin and padding.


height

Possible values:

length

auto

Initial value:

auto

Applies to:

block-level and replaced elements

Inherited:

no

Percentage values:

N/A

Determines the height of the element. This property can be applied to text, but it is most useful with inline images and similar insertions. The height is enforcedby scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the width property is auto.

For example:

	ids.first-image.height = 50;

align

Possible values:

left

right

none

Initial values:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

The align property determines the alignment of the content of an element, such as the element of text or image in a paragraph.

Note: This property corresponds to the CSS float property. The term float is a reserved word in JavaScript and cannot be used as a property name.

Using the align property, you can make an element float to the left or the right and indicate how other content wraps around it. This property is most often used with inline images.

If no value is specified, the default value is none. If the value is none, the element is displayed where it appears in the text.

If the value is left or right, the element is displayed on the left or the right (after taking margin properties into account). Other content will appear on the right or left side of the floating element. If the value is left or right, the element is treated as block-level (so, for example, you can set the text-align property can be set.)

Using the align property, elements can be declared to be outside the normal flow of elements. For example, by setting the align property of an image to left, the normal flow will wrap around on the right side. The image's position will be taken from the margin properties.

<STYLE TYPE="text/javascript">
    with(tags.IMG) {
	align = "left";
	marginLeft = "2em";
    }
</STYLE>
<BODY>
<IMG SRC=star.gif>
<P>This text wraps around the star which floats and twinkles 
	at the left.
</BODY>

Typically, you would use the align property with images, but there is nothing that prevents the align property being used on other elements:

with(tags.H1) {
	fontSize = "medium";
	align = "left"; /* run-in H1 headers */
}

clear

Possible values:

none

left

right

both

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

This property specifies if an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With clear set to left, an element will be moved below any floating element on the left side. With 'clear' set to none, floating elements are allowed on all sides.

Example:

 tags.H1.clear = "left";

Color and Background Properties for Tags, Classes, and Ids

Just as you can set color and background properties for a document as a whole, so you can set it for block level elements. These properties are applied to the "box" that contains the element.

color

Possible values:

color

Initial value:

depends on rendering program

Applies to:

all elements

Inherited:

yes

Percentage values:

N/A

This property describes the text color of an element, that is, the "foreground" color.

See Color Units for information about how to specify colors.

There are different ways to specify red:

with(tags.EM) {
	color = "red"; /* natural language */
	color = rgb(255,0,0); /* RGB rage 0-255 */
}

backgroundImage

Possible values:

url

Initial value:

empty

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

This property describes the background image of an element, the surface onto which the content (such as text) is rendered.

For example:
tags.BODY.backgroundImage = "http://images.com/background.jpg";
tags.P.backgroundImage = "http://images.com/daisy.gif";

backgroundColor

Possible Valuse:

color

Initial value:

empty

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

This property describes the background color of an element, the surface onto which the content (such as text) is rendered.

For example:

	tags.BODY.backgroundColor = "red";

Classification Properties for Tags, Classes, and Ids

These properties classify elements into categories more than they set specific visual parameters.

display

Possible values:

block

inline

list-item

none

Initial value:

according to HTML

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

This property indicates if an element is inline (for example. <EM> in HTML), block-level (for example. <H1> in HTML), or a block-level list item (for example, <LI> in HTML). For HTML documents, the initial value will be taken from the HTML specification.

A value of none turns the display of the element, including children elements and the surrounding box, off. (So if the value is none, the element will not be displayed.)

with(tags) {
	P.display = "block"; 
	EM.display = "inline"; 
	LI.display = "list-item"; 
	IMG.display = "none"; 
}

listStyleType

Possible values:

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

none

Initial value:

disc

Applies to:

elements with display property value of list-item

Inherited:

yes

Percentage values:

N/A

The listStyleType property describes how list items (that is,. elements with a display value of list-item) are formatted.

This property can be set on any element, and it will inherit normally down the tree. However, the list-style will only be displayed on elements with a display value of list-item. In HTML this is typically the case for the <LI> element.

For example:

	tags.UL.listStyleType = "disc"
	tags.OL.listStyleType = "decimal" /* 1 2 3 4 5 etc. */
	tags.OL.listStyleType = "lower-roman" /* a b c d e etc. */

whiteSpace

Possible values:

normal

pre

Initial value:

according to HTML

Applies to:

block-level elements

Inherited:

yes

Percentage values:

N/A

This property declares how white space inside the element should be handled. the choices are:

For example:

	tags.PRE.whiteSpace = "pre" /* initial value */

Precedence Order for Tags, Classes, and Ids

To find the value for an element/property combination, the following algorithm should be followed:

  1. Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case on the root element and for properties that do not inherit), the initial value is used.
  2. Sort the declarations by explicit weight.
  3. Sort by origin: the author's style sheets override the reader's style sheets which override the rendering program's default values.
  4. Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity. Some examples:
	tags.LI 
	/* a=0 b=0 c=1 -> specificity = 1; */
	contextual(tags.UL tags.LI)* 
	/* a=0 b=0 c=2 -> specificity = 2; */
	contextual(tags.UL tags.OL tags.LI)* 
	/* a=0 b=0 c=3 -> specificity = 3; */
	classes.class1.all 
	/* a=0 b=1 c=0 -> specificity = 10; */
	classes.class2.LI /* a=0 b=1 c=1 -> specificity = 11; */
	ids.x34y/* a=1 b=0 c=0 -> specificity = 100; */
  1. Sort by order specified: if two rules have the same weight, the latter specified should live.

The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.

A STYLE attribute on an element should be considered as if an ID attribute had been specified at the end of the style sheet. For example:

<P style='color = "blue"'>a paragraph of text</p>

The rendering program may choose to honor other stylistic attributes (such as ALIGN) as if a STYLE attribute had been used. When in conflict with other stylistic attributes, the STYLE attribute should win.


Units

Length Units

The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a unit converting function which contains a number as an argument

Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be clipped to the nearest value that can be supported.

There are three types of length units: relative, pixel and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (for example. from a computer display to a laser printer). Percentage units and keyword values (such as x-large) offer similar advantages.

Child elements inherit the computed value, not the relative value. For example:

	tags.BODY.fontSize = "12pt";
	tags.BODY.textIndent = "3em" /* i.e. 36pt */
tags.H1.fontSize = "15pt";

In the example above, the textIndent value of H1 elements will be 36pt, not 45pt.

These relative units are supported:

	tags.H1.marginTop: "0.5em" /* ems, the height of the element's font */
	tags.H1.marginTop: "1ex" /* x-height, the height of the letter 'x' */
	tags.P.fontSize: "12px" /* pixels, relative to rendering surface */

Pixel units are relative to the resolution of the rendering surface, which is most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested "reference pixel" is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length.

Absolute length units are useful only when the physical properties of the output medium are known. These absolute units are supported:

	tags.H4.fontSize: "2pt" /* points, 1pt = 1/72 in */
	tags.H4.fontSize: "1pi" /* picas, 1pc = 12pt */

Color Units

A color value is a either a color name or a numerical RGB specification.

The suggested list of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette and will also be used in HTML 3.2.

	tags.BODY.color = "black";
	tags.backgroundColor = "white";
	tags.H1.color = "maroon";
	tags.H2.color = "olive";

RGB colors are specified in the sRGB color space. You can specify an RGB color by a six digit hexadecimal number where the first two digits indicate the red value, the second two digits indicate the green value, and the last two digits indicate the blue value. For example:

BODY.color = "#FF0000"; /* red */
BODY.backgroundColor = "#333333"; /* gray */

URL

A Uniform Resource Locator (URL) is identified with a functional notation:

 tags.BODY.backgroundImage = "http://www.bg.com/pinkish.gif";

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:

 tags.BODY.backgroundImage = "yellow"; 


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

Copyright © 1997, Netscape Communications. All rights reserved.