[Contents] [Prev page] [Next page] [Index]

Dynamic HTML in Netscape Communicator
Part 1. Style Sheets

Chapter 5

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 chapter is organized in the following sections:

Comments in Style Sheets

New HTML Tags

New Attributes for Existing HTML Tags

New JavaScript Object Properties

Style Sheet Properties

Font Properties

Text Properties

Block-Level Formatting Properties

Color and Background Properties

Classification Properties

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.


<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 uses JavaScript syntax, set the TYPE attribute to "text/javascript". To specify that the style sheet uses CSS syntax, set the TYPE attribute to "text/css". The default value for TYPE is "text/CSS".

For example:

<STYLE TYPE="text/css">
  BODY {margin-right: 20%; margin-left:20%;}
  PRE {color:green;}
  all.CLASS1 {float:right; font-weight: bold;} 
</STYLE>

<LINK>

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

CSS Syntax

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

JavaScript Syntax

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

<SPAN>

Use the inline <SPAN> and </SPAN> elements to indicate the beginning and 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; font-
style:italic"> in bright, bold, italic blue. </SPAN>The blue text stands 
out much more.</P>

This example works in Netscape Navigator 4.0+. Example results:


Here is some normal paragraph text. It looks OK, but would be much better if it was in bright, bold, italic blue. The blue text stands out much more.


You can use the <SPAN> element to achieve effects such as a large initial letter, 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>

This example works in Netscape Navigator 4.0+. Example results:


This is...


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.


STYLE

The STYLE attribute determines the style of a specific element. For example:

CSS Syntax

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

JavaScript Syntax

<H3 STYLE="lineHeight='24pt'; fontWeight='bold'; color='cyan'"> 
Cyan Heading</H3>

This example works in Netscape Navigator 4.0+. Example results:


Cyan Heading


CLASS

The CLASSES JavaScript property allows you to define classes of styles in a style sheet. The CLASS attribute specifies a style class to apply to an element.

Although CSS syntax and JavaScript syntax use slightly different syntax to define classes of styles, the use of the CLASS attribute is the same in both syntaxes. For example:

CSS Syntax Example

<STYLE TYPE="text/css">
  H3.class1 {font-style:italic; color:red;}
</STYLE>

JavaScript Syntax Example

<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
classes.class1.H3.color="red";
</STYLE>

Style Sheet Use

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

To specify that a class can apply to all elements, use the element selector all when you set the properties for the class. For example, the code sample below specifies that the class LEMON can be applied to any element, and all elements that use the style class LEMON are yellow.

CSS Syntax

<STYLE TYPE="text/css">
  all.LEMON {color:yellow;}
</STYLE>

JavaScript Syntax

<STYLE TYPE="text/javascript">
  classes.LEMON.all.color="yellow"; 
</STYLE>

Style Sheet Use

<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, see the section Defining Classes of Styles in Chapter 3, "Creating Style Sheets and Assigning Styles."


ID

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 HTML content, as discussed in Part 2. Positioning HTML Content.

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.

CSS Syntax

<STYLE TYPE="text/css">
  P.STYLE1 {
  color:red; font-size:24pt; line-height:26pt;
  font-style:italic; font-weight:bold;
  }
  #A1 {color: blue;}
</STYLE>

JavaScript Syntax

<STYLE TYPE="text/javascript">
  with (classes.STYLE1.P) {
    color="red";
    fontSize="24pt";
    lineHeight="26pt"; 
    fontStyle="italic"; 
    fontWeight="bold";
  }
  ids.A1.color= "blue";
</STYLE>

Style Sheet Use

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

This example works in Netscape Navigator 4.0+. Example results:


Big red text

Big blue text


New JavaScript Object Properties

This section discusses the new JavaScript object properties that are useful for defining style sheets using JavaScript syntax.


tags

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

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>

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> element, since all other elements inherit from <BODY>. For example, to set a universal right margin for the document:

tags.body.marginRight="20pt"; /*JavaScript syntax */
BODY {margin-right:20pt;} /* CSS syntax */

classes

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


ids

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


Style Sheet Properties

Font Properties

Using styles, you can specify font size, font family, font style, and font weight for any element.


Font Size

CSS syntax name: font-size

JavaScript syntax name: fontSize

Possible values:

absolute-size, relative-size, length, percentage

Initial value:

medium

Applies to:

all elements

Inherited:

yes

Percentage values:

relative to parent element's font size

absolute-size

relative-size

length

percentage

CSS Syntax

P {font-size:12pt;}
EM {font-size:120%};
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}

JavaScript Syntax

tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%; 
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";

Font Family

CSS syntax name: font-family

JavaScript syntax name: fontFamily

Possible values:

fontFamily

Initial value:

the default font, which comes from user preferences.

Applies to:

all elements

Inherited:

yes

Percentage values:

NA

fontFamily

CSS Syntax Example

<STYLE TYPE="text/css">
  H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>

JavaScript Syntax Example

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

Font Weight

CSS syntax name: font-weight

JavaScript syntax name: 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:

CSS Syntax Example

<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>

JavaScript Syntax Example

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

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


Font Style

CSS syntax name: font-style

JavaScript syntax name: fontStyle

Possible values:

normal, italic

Initial value:

normal

Applies to:

all elements

Inherited:

yes

Percentage values:

N/A

This property determines the style of the font.

The following example specifies that emphasized text within <H1> elements appears in italic.

CSS Syntax Example

<STYLE>
H1 EM {font-style: italic;}
</STYLE>

JavaScript Syntax Example

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


Line Height

CSS syntax name: line-height

JavaScript syntax name: lineHeight

Possible values

number, length, percentage, normal

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 sets the distance between the baselines of two adjacent lines. It applies only to block-level elements.

number:

fontSize:10pt; 
line-height:1.2; /* line height is now 120%, ie 12pt */
font-size:20pt;  /* line height is now 24 pt, */

length:

line-height:0.4in;
line-height:18pt;

percentage

line-height:150%;

Negative values are not allowed.


Text Decoration

CSS syntax name: text-decoration

JavaScript syntax name: textDecoration

Possible values:

none, underline, 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 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 different color values.

For example:

BLOCKQUOTE {text-decoration: underline;}

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

.


Text Transform

CSS syntax name: text-transform

JavaScript syntax name: 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:

CSS Syntax Example

<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>

JavaScript Syntax Example

<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>

Style Sheet Use

<H1>This is a regular level-one heading</H1>
<H1 CLASS=CAPH1>important heading</H1>

This example works in Netscape Navigator 4.0+. Example results:


This Is A Regular Level-One Heading

IMPORTANT HEADING


Text Alignment

CSS syntax name: text-align

JavaScript syntax name: textAlign

Possible values:

left, right, center, justify

Initial value:

left

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" 

CSS Syntax Example

<STYLE TYPE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>

JavaScript Syntax

<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";
classes.JUSTP.P.color="red";
</STYLE>

Style Sheet Use

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

This example works in Netscape Navigator 4.0+. Example results:


A Normal Heading

A Right-Aligned Heading

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.

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.


Text Indent

CSS syntax name: text-indent

JavaScript syntax name: 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. An indent is not inserted in the middle of an element that was broken by another element (such as <BR> in HTML).

length

P {text-indent:3em;}

percentage

P {text-indent:25%;}

CSS Syntax Example

<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>

JavaScript Syntax Example

<STYLE TYPE="text/css">
classes.INDENTED.P.textIndent="25%";
</STYLE>

Style Sheet Use

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

This example works in Netscape Navigator 4.0+. Example results:


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.

This time the first line is indented 25 percent from the blockquote that surrounds this element. A blockquote automatically indents its contents.


Block-Level Formatting Properties

Style sheets treat each block-level element as if it is surrounded by a box. Block-level elements start on a new line, for example, <H1> and <P> are block-level elements, but <EM> is not.

Each box can have padding, border, and margins.You can set values for top, bottom, left and right paddings, border widths, and margins.

For a more detailed overview discussion of block-level formatting, see Chapter 4, "Format Properties for Block-Level Elements."


Margins

CSS syntax names: margin-left, margin-right, margin-top, margin-bottom, margin

JavaScript syntax names: marginLeft, marginRight, marginTop, marginBottom and margins()

Possible values

length, percentage, auto

Initial value:

0

Applies to:

all elements

Inherited:

no

Percentage values:

refer to parent element's width

These properties set the margin of an element. The margins express the minimal distance between the borders of two adjacent elements.

You can set each margin individually by specifying values for margin-left/marginLeft, margin-right/marginRight, margin-top/marginTop and margin-bottom/marginBottom.

In CSS syntax you can set all margins to the same value at one time by setting the margin property (note that the property name is singular). In JavaScript syntax you can use the margins() method sets the margins for all four sides at once. (Note that the function name is plural.)

The arguments to the margin property and margins() method are top, right, bottom and left margins respectively. For example:

CSS Syntax

/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {margin:10pt 20pt 30pt 40pt;} 
/* set all P margins to 40 pt */
P {margin:40pt;} 

JavaScript Syntax

/* 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 an <H1> element with a bottom margin of 40 points, is followed by a <P> element with a top margin of 30 points, then the separation between the two elements is 70 points. However, if the <H1> element has content, but the <P> element is empty, then the margin between them is 40 points.

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.

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

For a working example of setting margins, see the section Block-level Formatting Overview and Example.


Padding

CSS syntax names: padding-top, padding-right, padding-bottom, padding-left, paddings

JavaScript syntax names: 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

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 each side individually by specifying values for padding-top/paddingTop, padding-right/paddingRight, padding-left/paddingLeft and padding-bottom/paddingBottom.

In CSS syntax you can use the padding property (note that it is padding singular) to set the padding for all four sides at once. In JavaScript syntax you can use the paddings() method to set the margins for all four sides at once.

The arguments to the padding property (CSS syntax) and the paddings() method (JavaScript syntax) are the top, right, bottom and left padding values respectively.

CSS Syntax

/* 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;} 

JavaScript Syntax

/* 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 setting background color, see the section Background Color. For information about setting a background image, see the section Background Image.

For a working example of setting paddings, see the section Block-level Formatting Overview and Example.


Border Widths

CSS syntax names: border-top-width, border-bottom-width, border-left-width, border-right-width, border-width

JavaScript syntax names: borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, and borderWidths()

Possible values:

length

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

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

You can set the width of the top border by specifying a value for border-top-width/borderTopWidth. You can set the width of the right border by specifying a value for border-right-width/borderRightWidth. You can set the width of the bottom border by specifying a value for border-bottom-width/borderBottomWidth. You can set the width of the bottom border by specifying a value for border-left-width/ borderLeftWidth.

In CSS syntax, you can set all four borders at once by setting the border-width property. In JavaScript syntax you can set all four borders at once by using the borderWidths() function.

The arguments to the border-width property (CSS syntax) and the borderWidths() function (JavaScript syntax) are the top, right, bottom and left 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 */

For a working example of setting border widths, see the section Block-level Formatting Overview and Example.


Border Style

CSS syntax name: border-style

JavaScript syntax name: borderStyle

Possible values:,

none, solid, double, inset, outset, groove, ridge

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

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 details of setting the border width see the section Setting Border Widths, Color, and Style or the section Border Widths.

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

borders.htm


Border Color

CSS name: border-color

JavaScript syntax name:borderColor

Possible values:

none, colorvalue

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 a list of the named colors, see the section Color Units.

For example:

CSS Syntax

P {border-color:blue;}
BLOCKQUOTE {border-color:#0000FF;} 
H1 {border-color:rgb(0%, 0%, 100%);}

JavaScript Syntax

tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);

For a working example of setting border color, see the section Block-level Formatting Overview and Example.


Width

CSS syntax name: width

JavaScript syntax name: 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

This property determines the width of an element.

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

CSS Syntax Example

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

JavaScript Syntax Example

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 Block-level Formatting Overview and Example.



Alignment

CSS syntax name: float

JavaScript syntax name: align

Possible values:

left, right, none

Initial values:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

The float property (CSS syntax) and align property (JavaScript syntax) determine the alignment of an element within its parent. (Note that the text-align/textAlign property determines the alignment of the content of text elements.)

The term float is a reserved word in JavaScript, which is why the JavaScript syntax uses the name align instead of float for this property.

Using the float/align property, you can make an element float to the left or the right and indicate how other content wraps around it.

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 appears on the right or left side of the floating element. If the value is left or right, the element is treated as a block-level element.

Using the float/align property, you can declare elements to be outside the normal flow of elements. For example, if the float/align property of an element is left, the normal flow wraps around on the right side.

If you set an element's float/align property set, do not also specify margins 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 another element, such as a <DIV> block, that has the desired margins.

CSS Syntax Example

<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%;}
</STYLE>

JavaScript Syntax Example

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

Style Sheet Use

<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 level-
four 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>

This example works in Netscape Navigator 4.0+. Example results:


Level-Four Heading

I am a plain paragraph, positioned below a non-floating level-four heading.

H4 - My Text On Right, No Float

I am also a plain paragraph, positioned below a non-floating level-four heading. It just happens that the heading above me has its text alignment set to right.

H4 - Float = Right

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.


H4 - My Text on Right, Float = Left

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


H4 - Float = Right, Fixed Right Margin

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.


H4 - Float = Right

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.



Clear

CSS syntax name: clear

JavaScript syntax name: clear

Possible values:

none, left, right, both

Initial value:

none

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

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

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

CSS syntax name: color

JavaScript syntax name: color

Possible values:

color

Initial value:

black

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 the section Color Units for information about how to specify colors.

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

CSS Syntax Example

<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255, 0, 0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>

JavaScript Syntax Example

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


Background Image

CSS syntax name: background-image

JavaScript syntax name: backgroundImage

Possible values:

url

Initial value:

empty

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

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.

CSS Syntax Example

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

JavaScript Syntax Example

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

Style Sheet Use

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

This example works in Netscape Navigator 4.0+. Example results:


Heading One with Image Background

Hello. Notice how the portion of this paragraph that has an image background is promoted to being a block-level element on its own line.

Heading Two with Solid Color Background

Hello, here is some very interesting information. Notice that each colored portion of this paragraph just continues right along in its normal place.


Background Color

CSS syntax name: background-color

JavaScript syntax name: backgroundColor

Possible Values:

color

Initial value:

empty

Applies to:

all elements

Inherited:

no

Percentage values:

N/A

This property specifies a solid background color for an element.

See the previous section, Background Image, for a working example.


Classification Properties

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


Display

CSS syntax name: display

JavaScript syntax name: 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 whether an element is inline (for example, <EM> in HTML), block-level element (for example. <H1> in HTML), or a block-level list item (for example, <LI> in HTML). For HTML documents, the initial value is taken from the HTML specification.

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

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

CSS Syntax Example

EM.LISTEM {display:list-item;}

JavaScript Syntax Example

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

List Style Type

CSS syntax name: list-style-type

JavaScript syntax name: 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

This 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 its children will inherit the value. However, the list style is only displayed on elements that have a display value of list-item. In HTML this is typically the case for the <LI> element.

CSS Syntax Example

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

JavaScript Syntax Example

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

Style Sheet Use

<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 example works in Netscape Navigator 4.0+. Example results:


  1. Start the program.
  2. Enter your user name and password.
  3. From the File menu, choose the Magic command.

White Space

CSS syntax name: white-space

JavaScript syntax name: 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:

  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 measurement. For example, 12pt, 2em, 3mm.

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 as x-large) offer similar advantages.

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

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

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

The following relative units are supported:

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 */

You can also specify an RGB color by using the rgb() function which takes 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 */

[Contents] [Prev page] [Next page] [Index]

Last Updated: 08/07/97 15:21:45


Copyright 1997 Netscape Communications Corporation