Chapter 33
Style Sheets
Introduction
Prior to Netscape Navigator Version 4, Web page authors have had limited control over
the page style. They could not, for example, specify the left margin for their pages. The
World Wide Web Consortium (W3C) has solved this problem by introducing standards for
defining stylistic attributes for Web pages.
Using style sheets, you can specify many such attributes, ranging from text color,
margins, and element alignments to font styles, sizes, and weights.
Netscape Communicator supports two types of style sheets: cascading style sheets (CSS)
and JavaScript-accessible style sheets. The W3C has defined a set of properties and syntax
for CSS and its proposal is posted at http://www.w3.org/pub/WWW/TR/PR-CSS1.
Each style item is defined by a relevant attribute. The left margin, for example, is set
by margin-left, and the interword spacing by word-spacing.
In this book, the JavaScript-accessible style sheet syntax will be used to manipulate
style sheets. For each stylistic property, there is a JavaScript equivalent. Generally,
property names are the same for both types, with some minor differences due to JavaScript
naming restrictions.
Using JavaScript, you can specify styles for all elements of a particular kind (all
paragraphs should be displayed in green, for example) or you can declare classes of styles
to which you can assign any element you want. You can define, for instance, a class called
BAR whose style is green, bold, large text. Any document element (paragraph, block quote,
heading) can be a member of the class BAR, and it will be displayed in green, bold, large
text. You can also specify local styles for individual instances of document elements. You
can specify, for example, that the color for a single, particular paragraph is blue.
Content Layout
Using style sheets, you can determine margins for individual elements on a page, or for
all elements on a page. The following code, for instance, specifies that all paragraphs
will have a right margin of 20 pixels:
<STYLE>
tags.P.rightmargin=20;
</STYLE>
Font Properties
You can create styles that determine font size and font style (such as bold). The
following code, for example, specifies that all block quote elements will appear in bold:
<STYLE>
document.blockquote.fontStyle="bold";
</STYLE>
Text Properties
The modifiable attributes of text properties include line height, text decoration (such
as underlined), horizontal and vertical alignment of text, and text indent (which allows
indented and outdented paragraphs). For example:
<STYLE>
// 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 uppercase
tags.H5.textTransform = "uppercase"
// the text in all paragraphs is centered
tags.P.align = "center"
// the first line of each paragraph is indented 20 pixels
tag.P.indent = 20
</STYLE>
Inheritance of Styles
JavaScript-based style sheets use the notion of parent and child elements. For example,
in the following HTML source, the <H1> element is the parent one, while the
<EM> element is a child of the <H1> element.
<H1>The headline <EM>is</EM> important!</H1>
In general, child elements acquire or inherit the styles of their parent elements. Look
at the following example:
<H1 CLASS="boldBlue">The headline <EM>is</EM> important!</H1>
The child element (the <EM> element) inherits the style of its parent, so the
word “is” will appear emphasized in the boldBlue style. However, if you had previously
set up a style that specified that the <EM> element should be displayed in red, then
the word “is” would be displayed in red, since properties set on the child override
properties inherited from the parent. Inheritance starts at the oldest ancestor, at the
top-level element. In HTML, this is the <HTML> element which is followed by
<BODY>.
To set default style properties, just define the style before the <BODY> element.
For example, the following code sets the default text color to green:
<STYLE>document.tags.BODY.color="green";</STYLE>
If you want to change the color in a specific place, you can set styles for different
kinds of elements, or you can set up classes of styles. Some style properties cannot be
inherited from the parent, background color being one of those.
Creating Style Sheets and Assigning
Styles
There are three ways to specify styles using Javascript-based style sheets: (1) create
external style sheets and link them into your document, (2) create style sheets within a
document, or (3) specify specific styles for certain elements within a document.
The simplest way to assign styles is to apply them to all elements of a certain type.
For example, the following code indicates that all level one headings will be displayed in
green:
<STYLE>document.tags.H1.color = "green"</STYLE>
Setting up classes of styles within a document (bold, blue style, for example) will
allow you to apply styles to some elements but not others. Then, whenever you want an
element to be displayed in that style, you simply tell the browser what class of style to
use. For example:
<style type="text/javascript">
classes.boldBlue.all.color = "blue";
classes.boldBlue.all.fontWeight = "bold";
</style>
<P CLASS="boldBlue">This paragraph appears in bold, blue style</P>
<P>This should be in the normal document color<P>
The rest of this chapter describes the different ways to assign styles.
Defining Styles with the
<STYLE> Tag in the Header
You can use the <STYLE> tag within the header of a document to define styles for
specified elements used in the document. You can specify, for instance, that all level one
headings are blue, all block quotes are red, all paragraphs are emphasized, and so on. For
example:
<HTML>
<HEAD>
<TITLE>A Grand Title</TITLE>
<STYLE TYPE="text/javascript">
tags.H1.color = "blue"
</STYLE>
</HEAD>
<BODY>
<H1>This heading is in blue</H1>
