JavaScript Style Sheets

Communicator Pre-release 2


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

Introduction

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

The introduction of style sheets gives authors greater control over the presentation of their web documents. Using style sheets, you can specify many stylistic attributes of your web page, ranging from text color to margins to element alignments to font styles, sizes, and weights.

The classification of stylistic attributes has been defined by the World Wide Web Consortium. The W3C has recommended a standard for style sheets that describe stylistic attributesof HTML documents.

Style Sheets in Communicator

Netscape Communicator will support two types of style sheets: Cascading Style Sheets (CSS) and JavaScript style sheets.

In both Cascading Style Sheets and JavaScript-accessible style sheets, each style attribute is associated with a property. For example, the property that sets the left margin is called marginLeft. Generally, property names are the same for both types of style sheets with some minor differences due to JavaScript naming restrictions.

Cascading Style Sheets

Web pages that use cascading style sheets will be displayed appropriately in Netscape Navigator. For details of the CSS syntax, which is defined by the W3C, see

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

JavaScript Style Sheets

In JavaScript style sheets, each each stylistic property is reflected into JavaScript. Thus authors can use the JavaScript language to manipulate style sheets.

Using Netscape's JavaScript style sheet syntax, you can specify styles for all HTML elements of a particular kind. For example, you can say that all paragraphs should be displayed in green. Or you can declare classes of styles, and assign any element you want to that class. For example, you could have a class called BOLDGREEN whose style is green, bold, large text. Any element, be it a paragraph, a blockquote, or a level five heading, can be a member of the class BOLDGREEN so that it will be displayed in green, bold, large text. You can also specify local styles for individual elements, for example, you can specify that the color for a single, particular paragraph is blue.

The rest of this section summarizes the stylistic attributes that you can specify using JavaScript style sheets. For complete details of each attribute, see the Reference section

Content Layout

Using style sheets, you can determine margins for individual elements on a page, or for all elements on a page.

For example, the following code specifies that all paragraphs have a right margin of 20 pixels.

<STYLE TYPE="text/javascript">
 tags.P.marginRight=20;
</STYLE>

Font Properties

You can create styles that determine font size and font style (such as italic.)

For example, the following code specifies that all blockquote elements appear in italic:

<STYLE TYPE="text/javascript"
 tags.BLOCKQUOTE.fontStyle="italic";
</STYLE>

Text Properties

The modifiable attributes of text properties include line height, text decoration (such as underlining), horizontal and vertical alignment of text, and text indentation (which allow indented and outdented paragraphs.)

For example:

<STYLE TYPE="text/javascript">
	// the line height for block quotes is increased by 150 percent
	tags.blockquote.lineHeight* = 1.5;
	// level four headings are underlined
	tags.H4.textDecoration = "underline";
	// bold elements are vertically aligned with the top of their parent
	tags.B.verticalAlign = "top";
	// level five headings are displayed in upper case
	tags.H5.textTransform = "uppercase"; 
	// the text in all paragraphs is centered
	tags.P.textAlign = "center";
	// the first line of each paragraph is indented 20 pixels
	tags.P.textIndent = 20; 
</STYLE>


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

Copyright © 1997, Netscape Communications. All rights reserved.