[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 line heights or margins for 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 style sheet standard for HTML documents.

Style Sheets in Communicator

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

In both Cascading Style Sheets and JavaScript 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

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

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

Although this document draws all its examples from JavaScript style sheets, the next revision will include examples for both cascading style sheets and JavaScript styles sheets.

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 JavaScript Style Sheet 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 left margin of 100 pixels and a right margin of 80 pixels.

<STYLE TYPE="text/javascript">
  tags.P.marginLeft=100;
  tags.P.marginRight=80;
</STYLE>

<H1>Normal Heading 1</H1>
<P>This is a paragraph with wide margins. What do you think of that? I 
think it is very fashionable. I bet you wish you had wide margins too.</
P>
<P>What makes you think you're the only paragraph with wide margins? 
Look at my wide margins, they are just as wide as yours.</P>

Example results:


Normal Heading 1

This is a paragraph with wide margins. What do you think of that? I think it is very fashionable.I bet you wish you had wide margins too.

What makes you think you're the only paragraph with wide margins? Look at my wide margins, they are just as wide as yours.


Font and Text Properties

The modifiable attributes of font and text properties include 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 also set the color of of the text.

For example:

<STYLE TYPE="text/javascript">
	// level four headings are underlined and green
	tags.H4.textDecoration = "underline";
      tags.H4.color = "green";

      // block quotes appear in blue italic style
      tags.BLOCKQUOTE.color="blue";
      tags.BLOCKQUOTE.fontStyle="italic";
	// the line height for block quotes is increased by 150 percent
	tags.BLOCKQUOTE.lineHeight = 1.5;
	// the first line of each blockquote is indented 20 pixels
	tags.BLOCKQUOTE.textIndent = 20; 
	// bold elements are superscripted
	tags.B.verticalAlign = "super";
	// level five headings are displayed in upper case
	tags.H5.textTransform = "uppercase"; 
	// the text in all paragraphs is centered
	tags.P.textAlign = "center";
</STYLE>

<H4>Underlined Heading 4</H4>
<BLOCKQUOTE>
And that was the way it turned out to be. On reflection, I realize it 
was for the best <B>after all</B>, although I did not feel so at the 
time.
</BLOCKQUOTE>
<H5>Uppercase Heading 5</H5>
<P>Don't you find this paragraph is just a bit too centered? That's 
because we asked it to be centered, so we shouldn't really complain.</P>

Example results:


Underlined Heading 4

And that was the way it turned out to be. On reflection, I realize it was for the best after all, although I did not feel so at the time.
Uppercase Heading 5

Don't you find this paragraph is just a bit too centered? That's because we asked it to be centered, so we shouldn't really complain.



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

Copyright © 1997, Netscape Communications. All rights reserved.