Prerequisites : HTML & JavaScript

Style Sheets

Prior to the introduction of style sheets for HTML documents, web page authors had limited control over the presentation of their web pages. For example, you could specify text to be displayed as headings, but you could not set margins for your pages or specify the line heights or margins for text.

Style sheets give you greater control over the presentation of your web documents. Using style sheets, you can specify many stylistic attributes of your web page, such as text color, margins, element alignments, font styles, font sizes, font weights and more.

Popular browsers supports two types of style sheet syntax. They supports style sheets written in cascading style sheet (CSS) syntax. They also supports style sheets written in JavaScript that use the document object model. In the document object model, a document is an object that has properties. Each property can in turn be an object that has further properties, and so on.

Using Cascading Style Sheets to Define Styles

style sheets specification are authored by the World Wide Web Consortium, you can go to:

http://www.w3.org/pub/WWW/TR/REC-CSS1

A style sheet consists of a one or more style definitions. In CSS syntax, the property names and values of a style are listed inside curly braces following the selection criteria for that style. The selection criteria determines which elements the style is applied to, or which elements it can be applied to. If the selection criteria is an HTML element, the style is applied to all instances of that element. The selection criteria can also be a class, an ID, or it can be contextual. Each of these kinds of selection criteria are discussed in this document.

<STYLE TYPE="text/css">

<!--

P {font-size:18pt; margin-left:20pt;}

H1 {color:blue;}

-->

</STYLE>

Important: When specifying values for cascading style sheet properties, do not include double quotes.

Cascading style sheets require strict adherence to correct syntax. Be sure not to omit any semicolons between name/value pairs. If you miss a single semicolon, the style definition will be ignored. Similarly if you accidentally include a single extraneous character anywhere within a style definition, that definition will be ignored.

Using JavaScript and the Document Object Model to

Define Styles

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

<STYLE TYPE = "text/javascript">

tags.P.fontSize = "18pt";

tags.P.marginLeft = "20pt";

tags.H1.color = "blue";

</STYLE>

with (tags.P) {

color="green";

font-weight="bold";

font-style="italic";

font-family="helvetica";

}

Javascript Accessible Style Sheets 19

Introductory Example

Introductory Example

Using style sheets, you can specify many stylistic attributes of your web page. The stylistic characteristics you can set for font and text include text alignment, text color, font family (such as Garamond), font style (such as italic), font weight (such as bold), line height, text decoration (such as underlining), horizontal and vertical alignment of text, and text indentation (which allows indented and outdented paragraphs). You can specify background colors and images for elements. You can specify the color and style to use for the bullets and numbers in lists.

<STYLE TYPE="text/css">

P {

textAlign:center; margin-left:20%; margin-right:20%;}

H4 {

text-decoration:underline; color: green;}

H5 {

text-transform:uppercase; color: red;

border-width:4pt; border-style:outset;

background-color:yellow; padding: 4pt;

border-color:red;}

BLOCKQUOTE {

color:blue; font-style:italic;

line-height:1.5; text-indent:10%;}

</STYLE>

<STYLE TYPE="text/javascript">

with (tags.P) {

textAlign = "center"; marginLeft="20%". margin-right="20%";}

with (tags.H4) {

textDecoration = "underline; color = "green";

textTransform = "uppercase;}

with (tags.H5) {

color = "red";

borderWidths="4pt"=; borderStyle="outset";

backgroundColor="yellow"; paddings("4pt");

borderColor="red";}

with (tags.BLOCKQUOTE) {

color="blue"; fontStyle="italic";

lineHeight = 1.5; textIndent = "20pt";}

</STYLE>

<H4>Underlined Heading 4</H4>

<BLOCKQUOTE>

This is a blockquote. It is usual for blockquotes to be indented, but the first line of this blockquote has an extra indent. Also the line height in this blockquote is bigger than you usually see in blockquotes.

<h5>uppercase heading 5 with a border</H5>

</BLOCKQUOTE>

<P>This paragraph has a text alignment value of center. It also has

large margins, so each line is not only centered but is also inset on

both sides from the element that contains it, which in this case is the

document.</P>

Inheritance of Styles

An HTML element that contains another element is considered to be the parent element

of the element it contains, and the element it contains is considered to be its child

element.

<BODY>

<H1>The headline <EM>is</EM> important!</H1>

</BODY>

In many cases, child elements acquire or inherit the styles of their parent elements. For

<STYLE type="text/css">

H1 {color:blue;}

</STYLE>

<BODY>

<H1>The headline <EM>is</EM> important!</H1>

element, so the word is appears in blue. However, suppose you had previously set up a

would be displayed in red, because properties set on the child override properties

inherited from the parent.

To set default style properties for all elements in a document, you can specify a style for

green.

<STYLE TYPE="text/css">

BODY {color: green;}

</STYLE>

<STYLE TYPE="text/javascript">

tags.BODY.color="green";

</STYLE>

A few style properties are not inherited by the child element from the parent

element, but in most of these cases, the net result is the same as if the property

was inherited. For example, consider the background color property, which is

not inherited. If a child element does not specify its own background color,

then the parent’s background color is visible through the child element. It will

look as if the child element has the same background color as its parent

element.

Creating Style Sheets and Assigning Styles

This part looks at each of the different ways you can defines styles, and

shows how to apply styles to HTML elements.

• Defining Style Sheets with the <STYLE> Tag

• Defining Style Sheets in External Files

• Defining Classes of Styles

• Defining Named Individual Styles

• Using Contextual Selection Criteria

• Combining Style Sheets

A style sheet is a series of one or more style definitions.You can define a style

sheet directly inside the document that uses it, or you can define a style sheet

in an external document. If the style sheet is in an external document, then it

can be used by other documents. For example, a series of pages for a particular

site could all use a single externally defined style sheet that sets up the house

style.

If the style sheet is unlikely to be applicable to other documents, it can be more

convenient to define it directly in the document that uses it, since then you

have the style sheet and the content in one place.

Defining Style Sheets with the <STYLE> Tag

The following example defines a style sheet that specifies that all level-one

headings are uppercase blue, and all blockquotes are red italic.

<HEAD>

<STYLE TYPE="text/css">

H1 {color: blue; text-transform: uppercase;}

BLOCKQUOTE {color: red; font-style: italic;}

</STYLE>

</HEAD>

<BODY>

<HEAD>

<STYLE TYPE="text/javascript">

tags.H1.textTransform = "uppercase";

tags.H1.color = "blue";

tags.BLOCKQUOTE.color = "red";

tags.BLOCKQUOTE.font-style: italic;

</STYLE>

</HEAD>

<BODY>

<H1>This Heading Is Blue</H1>

<B>BLOCKQUOTE>This blockquote is displayed in red.</B>

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 benefit of this approach is that

the style sheet can be used by any HTML document. You could think of an

externally defined style sheet as a style template that can be applied to any

document. For example, you could apply a style template to all pages served

from a particular web site by including a link to the style sheet file in each

page.

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

/* external style sheet mystyles1.htm */

all.BOLDBLUE {color:blue; font-weight: bold;}

H1 {line-height: 18pt;}

P {color: yellow;}

/* end of file */

/* external style sheet mystyles1.htm */

classes.BOLDBLUE.all.color = "blue";

classes.BOLDBLUE.all.fontWeight = "bold";

tags.H1.lineHeight="18pt";

tags.P.color="yellow";

/* end of file */

to link to the style sheet, as in this example:

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://style.com/mystyles1.htm">

</HEAD>

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE="text/javascript"

HREF="http://style.com/mystyles1.htm">

</HEAD>

Defining Classes of Styles

If a document includes or links to a style sheet, all the styles defined in the style

sheet can be used by the document. If the style sheet specifies the style of any

HTML elements, then all the HTML elements of that kind in the document will

use the specified style.

There may be times when you want to selectively apply a style to HTML

in a document to be red, and others to be blue. In this situation, defining a style

define classes of style, and apply the appropriate class of style to each element

that needs to use a style.

To apply a style class to an HTML element, define the style class in the style

color is a medium shade of green and whose font weight is bold. The example

then illustrates how to use the style in HTML text.

Javascript Accessible Style Sheets 27

Defining Classes of Styles

<STYLE TYPE="text/css">

all.GREENBOLD {color:#44CC22; font-weight:bold;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.GREENBOLD.all.color = "#44CC22"

classes.GREENBOLD.all.fontWeight = "bold"

</STYLE>

<H1 CLASS=GREENBOLD>This Heading Is Very Green</H1>

<P CLASS = GREENBOLD>This paragraph uses the style class GREENBOLD. You

can use the CLASS attribute to specify the style class to be used by an

HTML element.</P>

<BLOCKQUOTE CLASS = GREENBOLD>

This blockquote uses the style class GREENBOLD. As a consequence, it is

both green and bold. It can be useful to use styles to make blockquotes

stand out from the rest of the page.

</BLOCKQUOTE>

In JavaScript syntax, you cannot use hyphens inside class names. A hyphen is

actually a minus sign, which is a JavaScript operator. Class names In JavaScript

syntax cannot include any JavaScript operators, including but not limited to -, +,

*, /, and %.

When defining a style class, you can specify which HTML elements can use this

<STYLE type="text/css">

all.DARKYELLOW {color:#EECC00;}

P.RED1 {color: red; font-weight:bold;}

BLOCKQUOTE.red1 {color:red; font-weight:bold;}

</STYLE>

<STYLE type="text/javascript">

classes.DARKYELLOW.all.color="#EECC00";

classes.RED1.P.color = "red";

classes.RED1.P.fontWeight = "bold";

classes.RED1.BLOCKQUOTE.color = "red";

classes.RED1.BLOCKQUOTE.fontWeight = "bold";

</STYLE>

<BODY>

<P CLASS=red1>This paragraph is red.</H1>

<P>This paragraph is in the default color, since it does not use the

class RED1.</P>

<BLOCKQUOTE CLASS="red1">This blockquote uses the class RED1.

</BLOCKQUOTE>

<H5 CLASS=red1>This H5 element tried to use the style RED1, but was not

allowed to use it.</H5>

<P CLASS=darkyellowclass>This paragraph is dark yellow.

<H5 CLASS=darkyellowclass>This H5 element tried to use the style

DARKYELLOW and was succesful.</H5>

An HTML element can use only one class of style. If you specify two or more

classes of style for an HTML element, the first one specified is used. For

<P CLASS="RED1" CLASS="DARKYELLOW">Another paragraph.</P>

Defining Named Individual Styles

You can create individual named styles. An HTML element can use both a class

of style and a named individual style. Thus you can use individual named styles

to express stylistic exceptions to a class of style. For example, if a paragraph

Individual names styles are also useful for defining layers of precisely

To apply the style to an element, specify the style name as the value of the

a a line height of 20 points, a font size of 18 points; a font weight of bold, and

a color of red. The code also defines a named style BLUE1 whose color is blue.

<STYLE TYPE="text/css">

all.STYLE1 {line-height: 20pt; font-size: 18pt;

font-weight: bold; color: red;}

#BLUE1 {color: blue;}

</STYLE>

<STYLE TYPE="text/javascript">

with (classes.STYLE1.all) {

lineHeight = "20pt";

fontSize = "18pt";

fontWeight = "bold";

all.color = "red";

}

ids.BLUE1.color = "blue";

</STYLE>

<P CLASS="STYLE1">Here you see some tall red text. The text in this

paragraph is much taller, bolder, and bigger than paragraph text

normally is.</P>

<P CLASS="STYLE1" ID="BLUE1">This paragraph has tall, bold, blue text.

Although this paragraph is in class STYLE1 1, whose members are normally

red, it also has a unique ID that allows it to be blue.</P>

Using Contextual Selection Criteria

You can define the style to be used by all HTML elements of a particular kind.

If you need more control over when a style is used, you can define a style class

that you can selectively apply to any element. Sometimes however, even that

level of control is not enough. You might, for example, want to specify a green

You can achieve this level of control over the application of styles by using

contextual selection criteria in your style definition. Contextual selection criteria

allow you to specify criteria such as "this style applies to this kind of element

nested inside that kind of element nested inside the other kind of element."

To specify contextual selection criteria in CSS syntax, list the HTML elements in

order before the opening curly brace of the properties list. In JavaScript syntax,

<STYLE TYPE="text/css">

H1 EM {color:green;}

</STYLE>

<STYLE TYPE="text/javascript">

contextual(tags.H1, tags.EM).color = "green";

</STYLE>

<H1>This is<EM> green, emphasized text,</EM> but this is plain headingone

text</H1>

Consider another example, given first in CSS syntax then in JavaScript syntax:.

UL UL LI {color:blue;}

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

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

You can use contextual selection criteria to look for tags, classes, IDs, or combinations

of these. For example, the following example creates a class called

elements is extra large.

<STYLE TYPE="text/css">

all.MAGENTACLASS {color: magenta;}

DIV P.MAGENTACLASS {font-style: italic;}

DIV P.MAGENTACLASS B {font-size:18pt;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.MAGENTACLASS.all.color = "magenta";

contextual(tags.DIV, classes.MAGENTACLASS.P).fontStyle = "italic";

contextual(tags.DIV, classes.MAGENTACLASS.P, tags.B).fontSize = "18pt";

</STYLE>

<DIV CLASS=MAGENTACLASS>

<H3>Heading 3 in the MAGENTACLASS</H3>

<P>Is this paragraph magenta and italic? It should be. Here comes some

<B>big bold text.</B> We achieved this result with contextual

selection.</P>

<P>This paragraph should be magenta too.</P>

</DIV>

<P>This paragraph is still magenta colored, but since it is not inside a

DIV block, it should not be italic.</P>

Specifying Styles for Individual Elements

of an HTML tag to define a style for use by that individual tag, and that tag

only. This approach basically defines the style on the fly, and can be useful in

situations where you want an element to use a style in a unique situation,

where you do not need to reuse the style elsewhere in the document.

In general though, it is better to define all the style used by a document in a

single place (be it at the top of the document or in a separate style sheet file) so

that you know where to make changes to the style. If a style is defined in a

style sheet, any element in the document can use that style. If you want to

change the properties of the style, you need to make the change only once and

it is automatically applied to all elements that use that style.

Sometimes, however, youmay want to specify the style of an individual

a piece of arbitrary content.

<P STYLE="color:green; font-weight:bold;

margin-right:20%; margin-left:20%;

border-width:2pt; border-color:blue;">

This paragraph, and only this paragraph is bold green with big margins

Javascript Accessible Style Sheets 33

Combining Style Sheets

and a blue border.</P>

<P>This paragraph is in the usual color, whatever that may be, but this

<SPAN STYLE="color:red; font-style:italic;">word </span> is different

from the other words in this paragraph.</P>

<P STYLE="color = 'green'; fontWeight='bold';

marginRight='20%' marginLeft='20%';

borderWidth='2pt'; borderColor='blue;">

This paragraph, and only this paragraph is bold green with big margins

and a blue border.</P>

<P>This paragraph is in the usual color, whatever that may be, but this

<SPAN STYLE="color=’red’; fontStyle=’italic’">word </span> is different

from the other words in this paragraph.</P>

Combining Style Sheets

You can use more than one style sheet to set the styles for a document. You

might want to do this when you have several partial styles sheets that you wish

to mix and match, or perhaps where your document falls into several different

categories, each with its own style sheet.

For example, suppose you are are writing a white paper about the benefits of a

network product from a company called Networks Unlimited. You might need

to use three style sheet: one defining the company’s usual style for white

papers, another defining their usual style for documents about networking

products, and yet another defining the corporate style for Networks Unlimited.

The following example illustrates the use of several style sheets in one

document:

<STYLE TYPE="text/css"

SRC="http://www.networksunlimited.org/styles/corporate"></STYLE>

<STYLE TYPE="text/css"

SRC="styles/whitepaper"></STYLE>

<STYLE TYPE="text/javascript"

SRC="styles/networkthings"></STYLE>

<STYLE TYPE="text/css">

H1 {color: red;} /* override external sheets */

</STYLE>

For externally linked style sheets, the last one listed takes precedence over

element and over styles defined in external style sheets. In general, local style

values override values inherited from parent elements, and more specific style

values override more general values, as illustrated in the following example.

<STYLE TYPE="text/css">

P {color:blue;}

B {color:green;}

</STYLE>

<STYLE TYPE="text/javascript">

tags.P.color="blue";

tags.B.color="green";

</STYLE>

<P>This is a blue paragraph, as determined by the style sheet. But these

<B>bold words are green,</B> as you see.</P>

<P STYLE="color:red">This is a red paragraph, as determined by the local

style. However, these <B>bold words are still green,</B> since the style

defined directly for bold elements overrides the style of the parent

element.</P>

Format Properties for Block-Level Elements

This part discusses the formatting options for block-level elements. Blocklevel

This part starts off by presenting an example that illustrates the various ways

of formatting block-level elements. After that comes a section discussing each

kind of formatting option in detail. The part and ends with a brief overview

of the inheritance behavior of properties that are used for formatting blocklevel

elements.

• Block-level Formatting Overview and Example

• Setting Margins or Width

• Setting Border Widths, Color, and Style

• Setting Paddings

• Inheritance of Block-Level Formatting Properties

Block-level Formatting Overview and Example

Style sheets treat each block-level element as if it were surrounded by a box.

Each box can have style characteristics in the form of margins, borders, and

padding. Each box can have a background image or color.

The margins indicate the inset of the edge of the box from the edges of the

document (or parent element). Each box can have a border that has a flat or

three dimensional appearance. The padding indicates the distance between the

element’s border and the element’s content.

You can also set the width of a block-level element, either to a specific value or

to a percentage of the width of the document (or parent element). As you can

imagine, it is redundant to set the left and right margin and to also set the

width.

If values are specified for the width and for both margins, the left margin

setting has the highest precedence. In this case, the value for the right margin

indicates the absolute maximum distance from the right edge of the containing

element at which the content wraps. If the value given for the width would

cause the element to run past the right margin, the width value is ignored. If

the width value would cause the element to stop short of the right edge, the

width value is used.

You can set the horizontal alignment of an element to left, right, or center. You

property in JavaScript syntax. It is also redundant to set the left and/or right

margin and then also set the element’s alignment.

The following example illustrates the use of margins, paddings, border widths,

background color, width, and alignment properties.

<STYLE TYPE="text/css">

P {

background-color:#CCCCFF;

/* margins */

margin-left:20%; margin-right:20%;

/* border widths

border-top-width: 10pt; border-bottom-width:10pt;

border-right-width:5pt; border-left-width:5pt;

/* border style and color

border-style:outset; border-color:blue;

/* paddings */

padding-top:10pt; padding-bottom:10pt;

Javascript Accessible Style Sheets 37

Block-level Formatting Overview and Example

padding-right:20pt; padding-left:20pt;

}

H3 {

/* font size and weight */

font-size: 14pt;

font-weight:bold;

background-image:URL("images/grenlite.gif");

/* center the heading with a 90% width */

width:90%;

float:center;

border-color:green;

border-style:solid;

/* all sides of the border have the same thickness */

border-width:10pt;

/* all sides have the same padding */

padding:20pt;

}

</STYLE>

<STYLE TYPE="text/javascript">

with (tags.P) {

backgroundColor="#CCCCFF";

/* P border style and color */

borderStyle="outset"; borderColor="blue";

/* P border widths */

borderTopWidth="10pt"; borderBottomWidth="10pt";

borderLeftWidth="5pt"; borderRightWidth="5pt";

/* P paddings */

paddingTop="10pt"; paddingBottom="10pt";

paddingLeft="20pt"; paddingRight="20pt";

/* P margins */

marginLeft= "20%"; marginRight="20%";

}

with (tags.H3) {

backgroundImage ="images/grenlite.gif";

/* font size and weight */

fontSize="14pt"; fontWeight="bold";

/* H3 border style and color */

borderStyle="solid"; borderColor="green";

/* center the heading with a 90% width */

width="90%"; align="center";

/* all sides of the border have the same thickness */

borderWidths("10pt");

/* all sides have the same padding */

paddings("20pt");

}

</STYLE>

<H3>H3 with a Solid Border</H3>

<P>Borders have their uses in everyday life. For example, borders round

a paragraph make the paragraph stand out more than it otherwise would.

</P>

<P>This is another paragraph with a border. You have to be careful not

to make the borders too wide, or else they start to take over the page.

</P>

Javascript Accessible Style Sheets 39

Setting Margins or Width

Setting Margins or Width

The margins indicate the inset of the element from the edges of the document

(or parent element.) You can set right, left, top, and bottom margins. The

"edge" of the parent is the theoretical rectangle that would be drawn round the

inside of the padding, border, or margins of the parent element, if it has any of

these properties.

You can set the values of the margins for a block-level element by specifying

the following properties (shown as CSS syntax/JavaScript syntax property

names):

• margin-top/marginTop

• margin-left/marginLeft

• margin-right/marginRight

• You can set all four properties at once to the same value, either by setting

JavaScript syntax.

You can set the horizontal alignment of an element to left, right, or center. You

property in JavaScript syntax. It is redundant to set the left and/or right margin

and then also set the element’s alignment.

percentage of the width of the containing element or document (for example,

long as the total does not exceed 100% of the width of the parent. It is not

useful, however, to set the width and also to set both margins, since two of the

values imply the third. (For example, if the left margin is 25% and the width is

60%, then the right margin must be 15%.)

Two or more adjoining margins (that is, with no border, padding or content

between them) are collapsed to use the maximum of the margin values. In the

case of negative margins, the absolute maximum of the negative adjoining

margins is deducted from the maximum of the positive adjoining margins.

To set the default margins for everything in a document, you can specify the

left and right margins to 20 points.

<STYLE TYPE="text/css">

BODY {margin-left:20pt; margin-right:20pt;}

</STYLE>

<STYLE TYPE="text/javascript">

with (tags.BODY) {

marginLeft="20pt"; marginRight="20pt";

}

</STYLE>

margins and width.

Setting Border Widths, Color, and Style

You can set the width of the border surrounding a block-level element by

specifying the following properties (shown as CSS syntax/JavaScript syntax

values):

• border-top-width/borderTopWidth

• border-bottom-width/borderBottomWidth

• border-right-width/borderRightWidth

• You can set all four properties at once to the same value, either by setting

Javascript Accessible Style Sheets 41

Setting Paddings

For an example of each of the border styles, see:

For another example of setting border widths, border style, and border color,

Setting Paddings

The padding indicates the distance between the border of the element and its

content. The padding is displayed even if the element’s border is not displayed.

You can set the size of the padding surrounding a block-level element by specifying

the following properties (shown as CSS syntax/JavaScript syntax values):

• padding-top/paddingTop

• padding-bottom/paddingBottom

• padding-right/paddingRight

• You can set all four properties at once to the same value, either by setting

in JavaScript syntax.

paddings.

Inheritance of Block-Level Formatting Properties

The width, margins, border characteristics, and padding values of a parent

element are not inherited by its child elements. However, at first glance it might

seem that these values are inherited, since the values of the parent elements

affect the child elements.

the edge of that box. Since the box is inset by 10 points, all the elements end

up being inset by 10 points.

Now consider what would happen if the child elements did inherit the margin

value from their parent element. If that were the case, then the DIV block

would have a left margin of 10 points, and child elements would also each

have a left margin of 10 points, so they would be indented on the left by 20

points.

Style Sheet Reference

This section includes reference information for both CSS syntax and JavaScript

syntax. It covers style sheet functionality that is implemented in Netscape

Navigator 4.0.

This reference does not include style sheet properties that can be used to

specify positions for blocks of HTML content. These properties are discussed in

Part 2. Positioning HTML Content.

This part is organized in the following sections:

Comments in Style Sheets

New HTML Tags

• <STYLE>

• <LINK>

• <SPAN>

New Attributes for Existing HTML Tags

• STYLE

• CLASS

• ID

New JavaScript Object Properties

• tags

• classes

• ids

Style Sheet Properties

Font Properties

• Font Size

• Font Style

• Font Family

• Font Weight

Text Properties

• Line Height

• Text Decoration

• Text Transform

• Text Alignment

• Text Indent

Block-Level Formatting Properties

• Margins

• Padding

• Border Widths

• Border Style

Javascript Accessible Style Sheets 45

Comments in Style Sheets

• Border Color

• Width

• Alignment

• Clear

Color and Background Properties

• Color

• Background Image

• Background Color

Classification Properties

• Display

• List Style Type

• White Space

Units

• Length Units

• Color Units

Comments in Style Sheets

Comments in style sheets are similar to those in the C programming language.

For example:

B {color:blue;} /* bold text will be blue */

tags.B.color = "blue"; /* bold text will be blue */

JavaScript style sheet syntax also supports comments in the C++ style, for

example:

tags.B.color = "blue"; // bold text will be blue

Comments cannot be nested.

New HTML Tags

This section lists the HTML tags that are useful for working with styles.

generally establish styles for use within the document.

For example:

<STYLE TYPE="text/css">

BODY {margin-right: 20%; margin-left:20%;}

PRE {color:green;}

all.CLASS1 {float:right; font-weight: bold;}

</STYLE>

document. For example:

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css"

HREF="http://style.com/mystyles1.htm">

</HEAD>

Javascript Accessible Style Sheets 47

New Attributes for Existing HTML Tags

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE="text/javascript"

HREF="http://style.com/mystyles1.htm">

</HEAD>

end of a piece of text to which a style is to be applied.

The following example applies an individual style to a piece of text.

<P>Here is some normal paragraph text. It looks OK, but would be much

better if it was<SPAN style="color:blue; font-weight:bold; fontstyle:

italic"> in bright, bold, italic blue. </SPAN>The blue text stands

out much more.</P>

for example:

<STYLE TYPE="text/css">

init-letter.all {font-size:400%; font-weight:bold;}

</STYLE>

<P><SPAN class="init-letter">T</SPAN>his is...</P>

New Attributes for Existing HTML Tags

This section lists the new attributes for existing HTML tags that are useful for

working with styles. These attributes can be used with any HTML tag to specify

the style for that tag.

<H3 STYLE="line-height:24pt; font-weight:bold; color:cyan;">

Cyan Heading</H3>

<H3 STYLE="lineHeight=’24pt’; fontWeight=’bold’; color=’cyan’">

Cyan Heading</H3>

Although CSS syntax and JavaScript syntax use slightly different syntax to define

For example:

<STYLE TYPE="text/css">

H3.class1 {font-style:italic; color:red;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.class1.H3.fontStyle="italic";

classes.class1.H3.color="red";

</STYLE>

<H3 CLASS="class1">This H3 is in red italic letters.</H3>

Class names are case-sensitive.

Each HTML element can use only one style class.

Javascript Accessible Style Sheets 49

New Attributes for Existing HTML Tags

when you set the properties for the class. For example, the code sample below

<STYLE TYPE="text/css">

all.LEMON {color:yellow;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.LEMON.all.color="yellow";

</STYLE>

<H1 class="LEMON">A Nice Yellow Heading</P>

<P CLASS="LEMON">What a nice shade of yellow this paragraph is.</P>

For more information about creating classes of style and for more examples,

Assigning Styles."

When defining style sheets, you can create individual named styles.

An element can use a style class and also use a named style. This allows you to

use named styles to express individual stylistic exceptions to a style class.

To define an individual names style in CSS syntax, you use the # sign to

indicate a name for an individual style, while In JavaScript syntax, you use the

ID selector.

In both CSS syntax and JavaScript syntax, you use the ID attribute in an HTML

element to specify the style for that element.

ID names are case-sensitive.

ID styles are particularly useful for working with layers of precisely positioned

The following code shows an example of the use of individual named styles. In

this example, the STYLE1 class defines a style with several characteristics. The

named style A1 specifies that the color is blue. This style can be used to specify

that a paragraph has all the style characteristics of STYLE1, except that its color

is blue instead of red.

<STYLE TYPE="text/css">

P.STYLE1 {

color:red; font-size:24pt; line-height:26pt;

font-style:italic; font-weight:bold;

}

#A1 {color: blue;}

</STYLE>

<STYLE TYPE="text/javascript">

with (classes.STYLE1.P) {

color="red";

fontSize="24pt";

lineHeight="26pt";

fontStyle="italic";

fontWeight="bold";

}

ids.A1.color= "blue";

</STYLE>

<P CLASS="STYLE1">Big red text</P>

<P CLASS="STYLE1" ID="A1">Big blue text</P>

Javascript Accessible Style Sheets 51

New JavaScript Object Properties

New JavaScript Object Properties

This section discusses the new JavaScript object properties that are useful for

defining style sheets using JavaScript syntax.

The following example uses JavaScript syntax to specify that all paragraphs

appear in red:

<STYLE TYPE="text/javascript">

tags.P.color = red;

</STYLE>

In CSS syntax, this would be:

<STYLE TYPE="text/css">

P {color:red;}

</STYLE>

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

For example, to set a universal right margin for the document:

tags.body.marginRight="20pt"; /*JavaScript syntax */

BODY {margin-right:20pt;} /* CSS syntax */

Style Sheet Properties

Font Properties

Using styles, you can specify font size, font family, font style, and font weight

for any element.

Font Size

An absolute-size is a keyword such as:

xx-small

x-small

small

medium

large

x-large

Possible values: absolute-size, relative-size, length, percentage

Applies to: all elements

Inherited: yes

Percentage values: relative to parent element's font size

Javascript Accessible Style Sheets 53

Style Sheet Properties

xx-large

A relative-size keyword is interpreted relative to the font size of the parent

element. Note that relative values only equate to actual values when the

element whose font size is a relative value has a parent element that has a

font size. (A relative size has to have something to be relative to.)

Possible values are:

larger

smaller

A percentage keyword sets the font size to a percentage of the parent

element’s font size.

P {font-size:12pt;}

EM {font-size:120%};

BLOCKQUOTE {font-size:medium;}

B {font-size:larger;}

tags.P.fontSize = "12pt";

tags.EM.fontSize = 120%;

tags.BLOCKQUOTE.fontSize = "medium";

tags.B.fontSize="larger";

The fontFamily indicates the font family to use, such as Helvetica or Arial. If

a list of font names is given, the browser tries each named font in turn until

it finds one that exists on the user’s system. If none of the specified font

families are available on the user’s system, the default font is used instead.

If you link a font definition file to your web page, the font definition file

will be downloaded with the page, thus guaranteeing that all the fonts in

the definition file are available on the user’s system while the user is

viewing that page. For more information about linking fonts to a document,

There is a set of generic family names that are guaranteed to indicate a font

on every system, but that exact font is system-dependent. The five generic

font families are:

• serif

• sans-serif

• cursive

• monospace

• fantasy

<STYLE TYPE="text/css">

H1 {fontFamily:Helvetica, Arial, sans-serif;}

</STYLE>

Initial value: the default font, which comes from user preferences.

Applies to: all elements

Inherited: yes

Percentage values: NA

Javascript Accessible Style Sheets 55

Style Sheet Properties

<STYLE TYPE="text/javascript">

tags.H1.fontFamily="Helvetica, Arial, sans-serif";

</STYLE>

Font Weight

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

<STYLE>

BLOCKQUOTE {font-weight: bold;}

</STYLE>

<STYLE>

tags.BLOCKQUOTE.fontWeight="bold";

</STYLE>

specify weight as a numerical value from 100 to 900, where 100 is the lightest

and 900 is the heaviest.

900

Applies to: all elements

Inherited: yes

Percentage values: N/A

This property determines the style of the font.

appears in italic.

<STYLE>

H1 EM {font-style: italic;}

</STYLE>

<STYLE>

contextual(tags.H1, tags.EM).fontStyle = "italic";

</STYLE>

Text Properties

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

text decoration.

Applies to: all elements

Inherited: yes

Percentage values: N/A

Javascript Accessible Style Sheets 57

Style Sheet Properties

Line Height

This property sets the distance between the baselines of two adjacent lines. It

applies only to block-level elements.

If you specify a numerical value without a unit of measurement, the line

height is the font size of the current element multiplied by the numerical

value. This differs from a percentage value in the way it inherits: when a

numerical value is specified, child elements inherit the factor itself, not the

resultant value (as is the case with percentage and other units).

For example:

fontSize:10pt;

line-height:1.2; /* line height is now 120%, ie 12pt */

font-size:20pt; /* line height is now 24 pt, */

An expression of line height as a measurement, for example:

line-height:0.4in;

line-height:18pt;

Percentage of the element’s font size, for example:

line-height:150%;

Negative values are not allowed.

Initial value: normal for the font

Applies to: block-level elements

Inherited: yes

Percentage values: refers to the font size of the element itself

This property describes decorations that are added to the text of an element. If

This property is not inherited, but children elements will match their parent. 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 child elements have

For example:

BLOCKQUOTE {text-decoration: underline;}

The text decoration options do not include color options, since the color of text

.

Applies to: all elements

Inherited: no, but see clarification below

Percentage values: N/A

Javascript Accessible Style Sheets 59

Style Sheet Properties

This property indicates text case.

capitalize

Display the first character of each word in uppercase.

uppercase

Display all letters of the element in uppercase.

lowercase

Display all letters of the element in lowercase.

none

Neutralizes inherited value.

For example:

<STYLE TYPE="text/css">

H1 {text-transform:capitalize;}

H1.CAPH1 {text-transform: uppercase;}

</STYLE>

<STYLE>

tags.H1.textTransform = "capitalize";

classes.CAPH1.H1.textTransform = "uppercase";

</STYLE>

Applies to: all elements

Inherited: yes

Percentage values: N/A

<H1>This is a regular level-one heading</H1>

<H1 CLASS=CAPH1>important heading</H1>

This property describes how text is aligned within the element.

Example:

tags.P.textAlign = "center"

<STYLE TYPE="text/css">

all.RIGHTHEAD {text-align:right; color:blue;}

P.LEFTP {text-align:left; color:red;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.RIGHTHEAD.all.textAlign="right";

classes.LEFTP.P.textAlign="left";

classes.RIGHTHEAD.all.color="blue";

classes.JUSTP.P.color="red";

Applies to: block-level elements

Inherited: yes

Percentage values: N/A

Javascript Accessible Style Sheets 61

Style Sheet Properties

</STYLE>

<H3>A Normal Heading</H3>

<H3 CLASS=RIGHTHEAD>A Right-Aligned Heading</H3>

<P>This is a normal paragraph. This is what paragraphs usually look

like, when they are left to their own devices, and you do not use style

sheets to control their text alignment.</P>

<P CLASS = LEFTP>This paragraph is left-justified, which means it has a

ragged right edge. Whenever paragraphs contain excessively, perhaps

unnecessarily, long words, the raggedness of the justification becomes

more manifestly apparent than in the case where all the words in the

sentence are short.</P>

The property specifies indentation that appears before the first formatted line.

HTML).

Length of the indent as a numerical value with units, for example:

P {text-indent:3em;}

Possible values: length, percentage

Initial value: 0

Applies to: block-level elements

Inherited: yes

Percentage values: refer to parent element's width

Length of the indent as a percentage of the parent element’s width, for

example:

P {text-indent:25%;}

<STYLE TYPE="text/css">

P.INDENTED {text-indent:25%;}

</STYLE>

<STYLE TYPE="text/css">

classes.INDENTED.P.textIndent="25%";

</STYLE>

<P CLASS=INDENTED>

The first line is indented 25 percent of the width of the parent

element, which in this case happens to be the BODY tag, since this

element is not embedded in anything else.</P>

<BLOCKQUOTE>

<P CLASS=INDENTED>

This time the first line is indented 25 percent from the blockquote that

surrounds this element. A blockquote automatically indents its contents.

</P>

</BLOCKQUOTE>

Block-Level Formatting Properties

Style sheets treat each block-level element as if it is surrounded by a box.

Each box can have padding, border, and margins.You can set values for top,

bottom, left and right paddings, border widths, and margins.

Javascript Accessible Style Sheets 63

Style Sheet Properties

For a more detailed overview discussion of block-level formatting, see

Part 4, "Format Properties for Block-Level Elements."

margin

These properties set the margin of an element. The margins express the

minimal distance between the borders of two adjacent elements.

In CSS syntax you can set all margins to the same value at one time by setting

at once. (Note that the function name is plural.)

bottom and left margins respectively. For example:

/* top=10pt, right=20pt, bottom=30pt, left=40pt */

P {margin:10pt 20pt 30pt 40pt;}

/* set all P margins to 40 pt */

Initial value: 0

Applies to: all elements

Inherited: no

Percentage values: refer to parent element's width

P {margin:40pt;}

/* top=10pt, right=20pt, bottom=30pt, left=40pt */

tags.BODY.margins("10pt", "20pt", "30pt", "40pt");

/* set all P margins to 40 pt */

tags.P.margins("40pt");

Adjoining margins of adjacent elements are added together, unless one of the

elements has no content, in which case its margins are ignored. For example, if

element with a top margin of 30 points, then the separation between the two

element is empty, then the margin between them is 40 points.

tag), they express the minimal distance from the replaced element to any of the

content of the parent element.

The use of negative margins is not recommended because it may have unpredictable

results.

Possible values: length, percentage

Initial value: 0

Applies to: all elements

Inherited: no

Percentage values: refer to parent element's width

Javascript Accessible Style Sheets 65

Style Sheet Properties

These properties describe how much space to insert between the border of an

element and the content (such as text or image). You can set the padding on

singular) to set the padding for all four sides at once. In JavaScript syntax you

method (JavaScript syntax) are the top, right, bottom and left padding values

respectively.

/* top=10pt, right=20pt, bottom=30pt, left=40pt */

P {padding:10pt 20pt 30pt 40pt;}

/* set the padding on all sides of P to 40 pt */

P {padding:40pt;}

/* top=10pt, right=20pt, bottom=30pt, left=40pt */

tags.P.paddings("10pt", "20pt", "30pt", "40pt")

/* set the padding on all sides of P to 40 pt */

tags.P.paddings("40pt");

Padding values cannot be negative.

To specify the color or image that appears in the padding area, you can set the

background color or background image of the element. For information about

These properties set the width of a border around an element.

Width.

property. In JavaScript syntax you can set all four borders at once by

border widths respectively.

/* top=1pt, right=2pt, bottom=3pt, left=4pt */

P {border-width:1pt 2pt 3pt 4pt;} /* CSS */

tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* JavaScript syntax */

/* set the border width to 2 pt on all sides */

P {border-width:40pt;} /* CSS */

tags.P.borderWidths("40pt"); /* JavaScript syntax */

Possible values: length

Initial value: none

Applies to: all elements

Inherited: no

Percentage values: N/A

Javascript Accessible Style Sheets 67

Style Sheet Properties

This property sets the style of a border around a block-level element.

For the border to be visible however, you must also specify the border width.

For an example of each of the border values, see:

groove, ridge

Initial value: none

Applies to: all elements

Inherited: no

Percentage values: N/A

Initial value: none

Applies to: all elements

Inherited: no

Percentage values: N/A

This property sets the color of the border. The color can either be a named color or

a 6-digit hexadecimal value indicating a color or an rgb color value.

For example:

P {border-color:blue;}

BLOCKQUOTE {border-color:#0000FF;}

H1 {border-color:rgb(0%, 0%, 100%);}

tags.P.borderColor="blue";

tags.BLOCKQUOTE.borderColor="#0000FF";

tags.H1.borderColor="rgb(0%, 0%, 100%);

CSS syntax name: width

JavaScript syntax name: width

This property determines the width of an element.

Applies to: block-level and replaced elements

Inherited: no

Percentage values: refer to parent element's width

Javascript Accessible Style Sheets 69

Style Sheet Properties

Note that if you set the left and right margins, and also the width of a property,

the margin settings take precedence over the width setting. For example, if the

left margin setting is 25%, the right margin setting is 10%, and the width setting

is 100%, the width setting is ignored. (The width will end up being 65% total.)

all.NARROW {width:50%;}

all.INDENTEDNARROW {margin-left:20%; width:60%;}

classes.NARROW.all.width = "50%";

classes.INDENTEDNARROW.all.width = "60%";

classes.INDENTEDNARROW.all.marginLeft = "20%";

For a working example of setting the width of an element, see the section

CSS syntax name: float

JavaScript syntax name: align

elements.)

Applies to: all elements

Inherited: no

Percentage values: N/A

the right and indicate how other content wraps around it.

element is displayed where it appears in the text.

(after taking margin properties into account). Other content appears on the

element is treated as a block-level element.

for it. If you do, the wrapping effect will not work properly. However, if you

want a floating element to have a left or right margin, you can put it inside

<STYLE TYPE="text/css">

H4 {

width:70%;

border-style:outset;

border-width:2pt;

border-color:green;

background-color:rgb(70%, 90%, 80%);

padding:5%;

font-weight:bold;

}

H4.TEXTRIGHT {text-align:right; margin-right:30%;}

H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}

H4.FLOATRIGHT {float:right;}

H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}

Javascript Accessible Style Sheets 71

Style Sheet Properties

</STYLE>

<STYLE TYPE="text/javascript">

with (tags.H4) {

width="70%";

borderStyle="outset";

borderWidth="2pt";

borderColor="green";

backgroundColor = "rgb(70%, 90%, 80%)";

paddings("5%");

fontWeight="bold";

}

classes.TEXTRIGHT.H4.textAlign="right";

classes.TEXTRIGHT.H4.marginRight="30%;"

classes.TEXTRIGHT_FLOATLEFT.H4.textAlign="right";

classes.TEXTRIGHT_FLOATLEFT.H4.align="left";}

classes.FLOATRIGHT.H4.align="right";

classes.FIXED_RIGHT_MARGIN.H4.align="right";

classes.FIXED_RIGHT_MARGIN.H4.marginRight="30%";

</STYLE>

<BODY>

<H4>Level-Four Heading</H4>

<P>I am a plain paragraph, positioned below a non-floating level-four

heading.

</P>

<H4 CLASS=TEXTRIGHT>H4 - My Text On Right, No Float</H4>

<P>I am also a plain paragraph, positioned below a non-floating levelfour

heading. It just happens that the heading above me has its text

alignment set to right.

</P>

<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>

<P>I am a regular paragraph. There’s not much more you can say about me.

I am positioned after a level-four heading that is floating to the

right, so I come out positioned to the left of it.</P>

<BR CLEAR>

<H4 CLASS=TEXTRIGHT_FLOATLEFT>H4 - My Text on Right, Float = Left </H4>

<P>I'm also just a plain old paragraph going wherever the flow takes me.

</P>

<BR CLEAR>

<H4 CLASS=FIXED_RIGHT_MARGIN>H4 - Float = Right, Fixed Right Margin</H4>

<P>Hello? Hello!! I am wrapping round an H4 that is floating to the right and

has a fixed right margin. When I try to satisfy all these requirements, you see

what happens! For best results, do not set the left and/or right margin when

you set the float (CSS syntax) or align (JavaScript syntax) property. Use an

enclosing element with margins instead.

</P>

<BR CLEAR>

<DIV STYLE="margin-left:30%;">

<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>

<P>Notice how the heading next to me seems to have a right margin.

That’s because we are both inside a DIV block that has a right margin.</

P>

<BR CLEAR>

</DIV>

</BODY>

Clear

Javascript Accessible Style Sheets 73

Style Sheet Properties

This property specifies whether an element allows floating elements on its

sides. More specifically, the value of this property lists the sides where floating

elements are allowed on all sides.

Example:

P {clear:left;}

tags.H1.clear = "left";

Color and Background Properties

Just as you can set color and background properties for a document as a whole,

you can set them for block-level elements too. These properties are applied to

the "box" that contains the element.

Color

Applies to: all elements

Inherited: no

Percentage values: N/A

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

color.

The following examples illustrate the ways to set the color to red.

<STYLE TYPE="text/css">

EM {color:red;}

B {color:rgb(255, 0, 0);}

I {color:rgb(100%, 0%, 0%);}

CODE {color:#FF0000;}

</STYLE>

<STYLE TYPE="text/javascript">

tags.EM.color="red";

tags.B.color="rgb(255, 0, 0)";

tags.I.color="rgb(100%, 0%, 0%)";

tags.CODE.color="#FF0000";

</STYLE>

Possible values: color

Initial value: black

Applies to: all elements

Inherited: yes

Percentage values: N/A

Javascript Accessible Style Sheets 75

Style Sheet Properties

This property specifies the background image of an element.

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

to the document.

<STYLE TYPE="text/css">

H1.SPECIAL {

background-image:url(images/glass2.gif);

padding:20pt;

color:yellow;

}

H2.SPECIAL {

padding:20pt;

background-color:#FFFF33;

border-style:solid;

border-width:1pt;

border-color:black;

}

P.SPECIAL B {background-image:url(images/tile1a.gif); }

P.SPECIAL I {background-color:cyan;}

</STYLE>

Possible values: url

Initial value: empty

Applies to: all elements

Inherited: no

Percentage values: N/A

<STYLE TYPE="text/javascript">

classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";

classes.SPECIAL.H1.paddings("20pt");

classes.SPECIAL.H1.color="yellow";

classes.SPECIAL.H2.paddings("20pt");

classes.SPECIAL.H2.backgroundColor="FFFF33";

classes.SPECIAL.H2.borderStyle="solid";

classes.SPECIAL.H2.borderWidth="1pt";

classes.SPECIAL.H2.borderColor="black";

contextual(classes.SPECIAL.P, tags.B).backgroundImage=

"images/tile1a.gif";

contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";

</STYLE>

<H1 CLASS=SPECIAL>Heading One with Image Background</H1>

<P CLASS=SPECIAL>

Hello. Notice how the portion of this paragraph that has an <B>image

background</B> is promoted to being a block-level element on its own

line.</P>

<H2 CLASS=SPECIAL>Heading Two with Solid Color Background</H2>

<P CLASS=SPECIAL>Hello, here is some <I>very interesting</I>

information. Notice that each <I>colored portion</I> of this paragraph

just continues right along in its normal place.

</P>

Javascript Accessible Style Sheets 77

Style Sheet Properties

This property specifies a solid background color for an element.

Classification Properties

These properties classify elements into categories more than they set specific

visual parameters.

Display

Possible Values: color

Initial value: empty

Applies to: all elements

Inherited: no

Percentage values: N/A

none

Initial value: according to HTML

Applies to: all elements

Inherited: no

Percentage values: N/A

HTML specification.

Note that block-level elements do not seem to respond to having their display property

EM.LISTEM {display:list-item;}

classes.LISTEM.EM.display="list-item";

This property can be set on any element, and its children will inherit the value.

upper-roman, lower-alpha, upperalpha,

none

Inherited: yes

Percentage values: N/A

Javascript Accessible Style Sheets 79

Style Sheet Properties

<STYLE TYPE="text/css">

UL.BLUELIST {color:blue;}

UL.BLUELIST LI {color:aqua;list-style-type:square;}

OL.REDLIST {color:red;}

OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}

</STYLE>

<STYLE TYPE="text/javascript">

classes.BLUELIST.UL.color="blue";

contextual(classes.BLUELIST.UL, tags.LI).color="aqua";

contextual(classes.BLUELIST.UL, tags.LI).listStyleType="square";

classes.REDLIST.OL.color="red";

contextual(classes.REDLIST.OL, tags.LI).color="magenta";

contextual(classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";

</STYLE>

<UL CLASS=BLUELIST> <!-- LI elements inherit from UL -->

<LI>Consulting

<LI>Development

<LI>Technology integration

</UL>

<OL CLASS=REDLIST> <!-- LI elements inherit from OL -->

<LI>Start the program.

<LI>Enter your user name and password.

<LI>From the File menu, choose the Magic command.

</OL>

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

The choices are:

For example:

P.KEEPSPACES {white-space:pre;} /* CSS syntax */

classes.KEEPSPACES.P.whiteSpace = "pre"; /* JavaScript syntax */

Units

This section discusses units of measurement.

Length Units

The format of a length value is an optional sign character ('+' or '-', with '+'

being the default) immediately followed by a number followed by a unit of

Initial value: according to HTML

Applies to: block-level elements

Inherited: yes

Percentage values: N/A

Javascript Accessible Style Sheets 81

Units

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 scale more easily from one medium to another (for example, from a

computer display to a laser printer). Percentage units and keyword values (such

Child elements inherit the computed value, not the relative value, for example:

BODY {font-size:12pt; text-indent:3em;}

H1 {font-size:15pt;}

45pt.

The following relative units are supported:

capital letter M

the letter 'x'

The following absolute units are supported:

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

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 {background-color:#333333";} /* gray */

three arguments, for the red, green, and blue values. Each color value can

either be an integer from 0 to 255 inclusive, or a percentage, as in this example:

P {color: rgb(200, 20, 240);) /* bright purple */

BLOCKQUOTE {background-color: rgb(100%, 100%, 20%); /* bright yellow */