Chapter 2

Introduction To Style Sheets

This chapter introduces the use of style sheets in Netscape Communicator. It gives an overview of the two different types of syntax you can use to define styles, presents an introductory example of the use of styles, and explains about style inheritance,

Style Sheets in Communicator

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.

Netscape Communicator supports two types of style sheet syntax. It supports style sheets written in cascading style sheet (CSS) syntax. It 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.

When you define a style sheet, you must declare its type as either "text/CSS" or "text/JavaScript". To try to keep things straight, this manual uses the term CSS syntax to refer to the syntax for style sheets whose type is "text/CSS". It uses the term JavaScript syntax to refer to the syntax for style sheets whose type is "text/JavaScript".

Using Cascading Style Sheets to Define Styles

Netscape Communicator fully supports cascading style sheets. Web pages that use cascading style sheets will be displayed appropriately in Netscape Communicator with a few minor exceptions.

This document describes the style sheet functionality that is implemented in Netscape Navigator 4.0. However, if you'd like to see the original specification for style sheets as authored by the World Wide Web Consortium, you can go to:

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

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.

Each property in the style definition is followed by a colon then by the value for that property. Each property name/value pair must be separated from the next pair by a semicolon.

For example, the following cascading style sheet defines two styles definitions. One style definition specifies that the font size for all <P> elements is 18 and the left margin for all <P> elements is 20. The other style definition specifies that the color for all <H1> elements is blue.

<STYLE TYPE="text/css">

<!--

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

    H1 {color:blue;}

-->

</STYLE>

You can include the contents of the style sheet inside a comment (<!-- ... -->) so that browsers that do not recognize the <STYLE> element will ignore it.

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 semi-colon, 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

Using JavaScript, you can define style sheets that use the document object model. In this model, you can think of a document such as a web page as an object that has properties that can be set or accessed. Each property can in turn be an object that has further properties. For example, the following code sets the color property of the object in the H1 property of the object in the tags property of the document:

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

The tags property always applies to the document object for the current document, so you can omit document from the expression document.tags.

The following example uses JavaScript and the document object model to define a style sheet that has two style definitions. One style definition specifies that the font size for all <P> elements (tags) is 18 and the left margin for all <P> elements is 20. The other style definition specifies that the color for all <H1> elements is blue.

<STYLE TYPE = "text/javascript">

  tags.P.fontSize = "18pt";

  tags.P.marginLeft = "20pt";

  tags.H1.color = "blue";

</STYLE>

Do not wrap the contents of the style sheet in a comment (!-- ... -->) for style sheets that use JavaScript syntax.

You can also use the with (tags.element) syntax to shorten the style specification for elements that have several style settings. The following example specifies that all <P> elements are displayed in green, bold, italic, Helvetica font.

with (tags.P) {

  color="green";

  font-weight="bold";

  font-style="italic";

  font-family="helvetica";

}

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.

You can set margins and also specify borders for block-level elements. You can set the padding for elements that have borders, to indicate the distance between the element's content and its border.

The following code shows a simple style sheet in both CSS syntax and JavaScript syntax. This style sheet specifies that all <P> elements have left and right margins, and their text is centered between the margins. All <H4> elements are green and underlined. All <H5> elements are uppercase. They have a red border that is four points thick. The border is in outdented 3D style and the padding between the text and the border is four points. The text color is red and the background color is yellow. All <BLOCKQUOTE> elements are blue italic, with a line height that is 150% larger than the font size. The first line is indented by 10% of the width of the element.

CSS Syntax

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

JavaScript Syntax

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

Style Sheet Use

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

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

Underlined Heading 4

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.

uppercase heading 5 with a border

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.

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.

For example, in the following HTML text, the <BODY> element is the parent of the <H1> element which in turn is the parent of the <EM> 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 example, suppose a style has been assigned to the <H1> element as follows:

<STYLE type="text/css">

H1 {color:blue;}

</STYLE>

<BODY>

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

In this case, the child <EM> element takes on the style of its parent, which is the <H1> element, so the word is appears in blue. However, suppose you had previously set up a style specifying that <EM> elements should be displayed in red. In that case, the word is would be displayed in red, because properties set on the child override properties inherited from the parent.

Inheritance starts at the top-level element. In HTML, this is the <HTML> element, which is followed by the <BODY> element.

To set default style properties for all elements in a document, you can specify a style for the <BODY> element. For example, the following code sets the default text color to green.

CSS Syntax

<STYLE TYPE="text/css">

    BODY {color: green;}

</STYLE>

JavaScript Syntax

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