WHAT?

What are style sheets, anyway? Let us look at style sheets in more detail now.

A style sheet can describe a common format for a HTML document or a group of HTML documents. Style sheets are a way of complementing the structural information provided by HTML, and offer a means of imparting concisely design characteristics. There are currently two main style sheet approaches, DSSSL (Document Style Semantics and Specification Language, an ISO standard) and CSS1.

DSSSL was "designed to specify the processing of documents conforming to an SGML representation." The DSSSL specification contains two independent processes: the SGML Tree Transformation Process (STTP), which transforms one SGML document to another SGML document; and the SGML Tree Formatting Process (STFP), which is used to format SGML documents. Both of these processes have the ability stand alone (http://navycals.dt.navy.mil/dsssl.html.)

Cascading style sheets, as defined in W3C recommendation REC-CSS1-961217, provide a method of describing how HTML documents are presented on screens, in print, or perhaps how they are pronounced (http://www.w3.org/pub/WWW/Style/#what.) CSS1 specifies level 1 of the Cascading Style Sheet mechanism. CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writeable, and expresses style in common desktop publishing terminology. One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in the CSS1 specification (http://www.w3.org/pub/WWW/TR/WD-css1.html.) A standard table of 140 colors is also defined in the REC-CSS1-961217 document (a table of these colors can be viewed at http://www.nps.navy.mil/internal/tutorial/colortbl.htm, assuming that a CSS1-enabled browser, such as Microsoft Internet Explorer, is used to view the document.)

Although DSSSL has various virtues, CSS1 is likely to have the biggest impact on the Internet. This is largely because it is backed by the official World Wide Web Consortium and most of the major players in the Internet market (http://www.computerweekly.co.uk/gwspeak/css1.html.)

WHY?

Netscape's BODY attributes are now widely accepted and used on the Web, and will soon become standardized in HTML 3.2. Some Netscape directives, however, such as BGCOLOR and TEXT do not provide the flexibility of style sheets. Some background images would render a Web page illegible to someone with a display supporting only 16 colors; sometimes 256 colors is not even adequate to view some Web pages. If a page is written using style sheets, however, an author can give the user a choice of style sheets, with each sheet containing formatting appropriate for the user's display and other preferences. If no author-supplied style suits the user, the user can simply choose to use no style sheet at all.

Style sheets can greatly simplify the Web authoring process. While an author could use <HR WIDTH="75%" SIZE=5 ALIGN=center> for every horizontal rule, this becomes quite cumbersome for the author. With style sheets, such directives need only be specified once, and the style can be applied to an entire site. If the need arises to change the WIDTH to WIDTH="50%", the change only needs to occur on one place instead of in tens or hundreds of places. Style sheets also reduce download time by eliminating redundant formatting information in multiple documents; the formatting information needs only to appear once in a file containing a style sheet.

Style sheets provide a high level of flexibility in terms of the presentation effects that they offer. Properties such as color, background, margin, border, etc. can be applied to all elements. With HTML and its proprietary extensions alone, one must rely on attributes like BGCOLOR, which only apply to a few elements. Style sheets give the flexibility of applying a particular style to all paragraphs, or all level-two headings, or all emphasized text.

With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like <DD> or transparent .GIF images (watch for how many times Web authors use <IMG SRC="blank.gif" WIDTH=10 ALT=""> to indent a document a certain amount) that carry with them many negative side-effects. Margins can be specified without having to put the entire page in a table. Style sheets also reduce the need for changing multiple files; if an author decides to change the indentation of all paragraphs on a site, only one line on a style sheet needs to be changed.

(http://htmlhelp.com/reference/css/stylesheets-now.html.)

Besides saving Web authors everywhere much hassle, style sheets promise to help do away with some of the more "deadly" HTML features in wide use today. One good example of such a feature is the <FONT> or <FONT FACE> tag, which causes headaches for many Web authors and Web users. Problems occur when a person is browsing a multilingual document which contains more than one typeface. When the <FONT FACE> tag is used and a font for a different script is specified, the browser is being lied to about the identity of the characters that are supposedly identified by the underlying codes in the browsing computer. If one types <FONT FACE="some_Greek_font"> xyqdwo </FONT>, Greek will indeed appear, but this is not the proper way to encode Greek text. Incorrect results will be obtained if the user looking at the above described Web page does not have exactly the font that was specified by <FONT FACE>: the user will see the text in the browser's default font, which will not be Greek (unless the user is Greek, of course!), even though a perfectly good Greek font is installed on the browsing system, which could have been used had the text been coded properly. When another Web author chooses another font, coded differently, that same exact font will need to be installed to display pages authored by that author. This is not a very clean, simple, non-redundant method of managing fonts! Style sheets, on the other hand, provide a method of automatically applying free system fonts to the appropriate characters (http://www.isoc.org/web_ml/html/fontface.html.)

As stated above, the style information contained in a style sheet can either be applied to an entire document, or to just parts of it. In the former case it can be stored as an external file, perhaps used by several Web pages. This can be done using a new tag that points to the external style sheet. Alternatively it can be embedded within the HTML document itself. In this case, each mini-style sheet within the document uses the tag. Style properties can be applied to blocks, such as paragraphs and lists, or to individual aspects such as bold, italic, emphasized text, etc.

Elements that can be controlled include font size, font weight, font family, letter spacing and word spacing. As the name implies, Cascading Style Sheets can be applied in layers, so that various style properties are overlaid on top of others, replacing them wholly or in part (http://www.computerweekly.co.uk/gwspeak/css1.html.)

HOW?

An excellent example explaining the various elements of a style sheet and their purpose can be found at http://webreview.com/96/11/08/feature/sidebar.html.

Introduction

Issues/debates surrounding style sheets

IT Standards Home
February 27, 1997
Final Version
thomsone@timken.com