HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

There are additional benefits to the style sheet approach. First, an author can develop a single style sheet and apply it to all documents in a given collection. As a result, the work of developing a style can be shared amongst a number of documents, making life easier for the author, and giving the collection a common look and feel. Also, separating the style information from the HTML documents means that the HTML documents stay compact and easy to understand—they do not become cluttered with multiple, device–specific formatting tags. It is far more difficult to write an HTML document if the author, each time, has to add all sorts of physical formatting hints. Using style sheets, the author need only create a single style sheet and can then forget about this part of the problem and get back to creating the desired content.

Style Sheet Languages

So if style sheets are so good, why are they not in common use? The answer is a bit like the chicken and the egg. First, until recently, there was no accepted Web style sheet language. Second, there was a lack of browser support for a style sheet language—which makes sense, given the lack of such a language. These issues have finally been resolved, with both major browser vendors supporting a single, relatively simple style sheet language.

The language now being implemented is known as cascading style sheets or CSS. CSS was designed to be very simple to use and understand, so that most HTML authors should find it easy to construct style sheets with CSS. This language is supported by Netscape Navigator 4 and Internet Explorer 4, albeit with some bugs.

Linking Style Sheets to HTML Documents

There are two ways to include style sheet information in a document: either by using LINK to reference an external style sheet or by including style sheet information within a STYLE element inside the document itself.

Linking to an External Style Sheet

In this approach, the style sheet is placed in a file separate from the HTML document. An HTML document then references the desired style sheet using a LINK element. The markup is

<LINK REL=“stylesheet” TYPE=“mime/type” HREF=“url”>

where the value REL=“stylesheet” indicates that the target resource is a style sheet, url is the URL pointing to the style sheet document, and mime/type is the MIME type for the style sheet. This allows for different style sheet languages, each with its own MIME type. The CSS language has the MIME type text/css.

Style Sheets within the Document HEAD

Style sheets can be also placed inside a STYLE element lying inside the document HEAD. A simple example is:

<STYLE>
<!––
BODY      {
            font–family:  times, serif;
            color:        black ;
            margin–left:  10%;
            margin–right: 10%;    }
A:link    { color: black; text–decoration: underline }
A:visited { color: black; text–decoration: none }
––>
</STYLE>

Note the use of the HTML comment delimiters (<!–– and ––>) to surround the style sheet—this ensures that older browsers that do not understand CSS will not display the content as regular markup.

As far as formatting is concerned, there is no difference between placing the style sheet in a separate file or in the HEAD of an HTML document. The advantage of the former, of course, is that the same style sheet can be used by many different files, without the need to duplicate the information in the HEAD of every document.

META Specification of a Default Language

Of course, the STYLE element does not indicate the style sheet language used by the enclosed data. META elements can be used to indicate this language, using the markup:

<META HTTP–EQUIV=“Content–style–type” CONTENT=“type/subtype”>

where type/subtype is the type of the style sheet language. For CSS, this is simply:

<META HTTP–EQUIV=“Content–style–type” CONTENT=“text/css”>

In the absence of this element, a browser may guess at the language, with unpredictable results. For now, of course, there is only one language (CSS), so that this is not required.

Note that this META format implies that the default style sheet type can be indicated by an HTTP server response header field of the form:

Content–style–type: type/subtype

See Chapter 9 for more information about HTTP headers and the HTTP protocol.

Attaching Formatting to Elements

There are then several ways to associate style sheet formatting information with HTML elements. Typically, style sheet instructions specify the element to which the style should be applied. For example, the statement EM {font–style:italic;} says that all EM elements should be rendered in italics, while the statement A:visited {color:purple} says that the text inside visited hypertext anchors should be in the regular font, but purple in color. This simple mechanism lets style sheets easily specify generic characteristics for all elements of a particular type.

Style Sheets and the CLASS Attribute

In some cases, however, an author may wish to specify formatting specific to one particular instance of an element and not another. For example, text within standard DIV elements may have no special formatting, whereas text within DIV elements serving a particular purpose should be indented and in a slightly smaller font to mark the fact, for example, that the enclosed text is part of an abstract.

In HTML, such element–specific variation is supported through element subclassing, made possible by the new CLASS attribute. CLASS is supported all BODY content elements except BASEFONT, PARAM, SCRIPT, and STYLE. CLASS is intended for defining special logical characteristics associated with an element. For example, to indicate that a block of text is part of an abstract, the markup could be written:

<DIV CLASS=“abstract”>
   <P>The spiny–bifurcated oyster is one of the most
      interesting, if poorly understood mollusks of the
      Eastern seaboard. In this overly long and tedious
      paper, we ....
</DIV>

In a style sheet, the author can specify abstract–specific formatting with the style sheet rule

DIV.abstract {
    font–size:    10pt;
    color:        black ;
    margin–left:  15%;
    margin–right: 15%;
}

where the notation DIV.abstract ties these rules to DIV elements of CLASS=“abstract.”

Nested Elements and Inheritance

An important feature of CSS is inheritance—unless a style sheet states otherwise, an element inherits the characteristics of the element it is inside. Thus, in the preceding example, P elements (paragraphs) inside the DIV inherit the extra indents and 10 point font size specification from the surrounding DIV. This is possible because, in general, default formatting for elements is specified as rules relative to the elements they are contained within. For example, the default specification for EM is EM {font–style:italic}, which just italicizes whatever font face, size, and color the surrounding text may have.