Cascading Style Sheets

The original concept of the Web was to enable the exchange of scientific information using HTML, which was a subset of SGML. The focus was on a simple markup scheme that controlled the way various parts of a document would be displayed in a character-based environment. Introduction of graphical user interfaces and commercial browsers took HTML from an SGML-compatible markup language to a hotchpotch of presentational tags.

Various things have happened to standardise HTML and provide for two streams, so to speak, structured markup and presentation markup. Cascading Style Sheets (CSS) was introduced as a tool for visual presentation. There are two standards, CSS1 and CSS2; CSS1 is fully implemented, but CSS2 (which is backwardly compatible with CSS1) has varying degrees of support in current browsers - from none to some. The latest information on CSS2 and which browsers support what, can be found at the URLs mentioned below.

For the latest information on the status of CSS2 and which browsers support which features of CSS1, visit http://style.webreview.com/; all the latest information in tabular form is available for download. Netscape 6 and Opera are fully CSS1 compliant. Amaya (the Web consortium's test-bed browser) is also fully compliant.

So, what do cascading stylesheets do? Anyone who has worked with TeX will be familiar with its input files; they contain all the formatting commands and other instructions that DTP users call style or stylesheets and are read into a working file by simple reference. Using CSS is like the TeX input file(s). It enables the user to set up a file containing presentation controls and to apply those controls by a reference in an HTML document.

Style sheets can control colour (of text, background, or of any element), create borders around any element and control the space around them, the appearance of text, and provide other wonderous effects. "Style sheets can do this by centralising the commands for certain visual effects in one handy place, instead of scattering them throughout the document." [Eric Meyer: Cascading Style Sheets - The Definitive Guide].

For example, suppose you want to make all the H1 headings red. In ordinary HTML it would be necessary to deal with each and every H1 tag thus:

<H1><FONT COLOR="red">My heading is RED</FONT></H1>

Using the much more simple code, H1{color:red;}, in a CSS file would result in every instance of H1 being rendered in red.

A more complex example is given in Eric Meyer's book. Suppose you want a "title to be dark red, use a certain font, be italicised and underlined, and have a yellow background". To do all of that with HTML, you'd have to put the H1 into a table and load it up with a ton of other tags like FONT and U. With CSS, all you need is one rule:

H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; background: yellow;}.

There's no need to confine ourselves to only those things HTML can do, however:

H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; background: yellow; url(titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}

That yields a background image (titlebg.png) that is repeated only horizontally, a border around H1 and separated from the text by five pixels, and no blank space at the bottom. Try that with HTML code.

So, where does the "cascade" come in? When a CSS is applied to a page it affects all succeeding pages until another CSS is encountered. You may be wondering how easy it would be to become lost in CSS space. The only problem is that of turning off or changing a particular style element and reinstating it. Suppose, in the example above, certain pages require a change of font and background colour; each of those pages could carry the simple insertion, H1{color:black;background:blue;}, which will affect only those pages in which it has been inserted. More ambitious variations should be well tested to ensure there are no unwanted conflicts.

It is also necessary to ensure that any style used will translate correctly at the end user's machine. If it is not known what browser or browser version is being used, then check the list at http://style.webreview.com/.

An advantage of CSS is that document size is reduced, which means faster loading at the user end. If you want to see how CSS can make a site more compact, visit http://www.alistapart.com; it is a great showcase for CSS and well rendered fonts.

An excellent text on CSS is Eric Meyer's Cascading Style Sheets, which is part of the O'Reilly Web Design CD Bookshelf. The http://www.w3.org/Style/CSS site is a mine of information with downloadable tutorials and examples.

The following example is from <http://www.zvon.org>, which contains 

an excellent collection of CSS (and other) resources, including tutorials, 

and links to other URLs, such as http://www.alistapart.com, a must-visit 

site for CSS and other Web style topics. This is a .CSS file that is 

created in plain text and saved with a CSS extension. It does not require 

any preamble, and in this instance sets the colours of the various heading 

levels and the body text, which will be in bold face.



    h1 {color:blue}

    h2 {color:navy}

    h3 {color:olive}

    h4 {color:purple}

    h5 {color:maroon}



    p  {font-weight:bold; color:red;}



Below is how the CSS file appears in the HTML document. In this instance the 

CSS file has been saved as aaa.css. The "href" attribute specifies the CSS 

source file and - if not in the same directory as the HTML file - its location.



<html>

  <head>

  <link rel='stylesheet' type='text/css' href='aaa.css'>

  <title>A CSS example</title>

  </head>

    <body>

        <h1>Heading 1</h1>

        <h2>Heading 2</h2>

        <h3>Heading 3</h3>

        <h4>Heading 4</h4>

        <h5>Heading 5</h5>

                <p>Text</p>

    </body>

  </html>



There is more than one way to specify CSS attributes within an HTML document. 

Using one or more external .css files (as above) is one method. Another is:



    <html>

       <head>

         <title>Another method</title>

         <style type="text/css">

           <!---

           /* this will make all the H1 headers purple with

              an italic typeface*/

           h1 {color: purple font:-style: italic}

                  --->

         </style>

               </head>

    <body>

      <h1>A nice purple heading in italics</h1>

    </body>

    </html>



There are a couple of things that may seem strange to novice CSSers; 

the sequence, <!---  ---> normally surrounds an HTML comment that will 

not be processed by the browser. The CSS data (h1 {color: .....) is 

enclosed this way so that older browsers that don't know about CSS will 

not attempt to process or print the data.  The /* .... */ is CSS-speak 

for a comment; it is a good idea to include comments when creating any 

CSS file, but especially large files.



Yet another method is by way of class selectors. That is beyond the 

scope of this article, but is mentioned in case readers come across 

something like, .heading1{ within a <style> tag. A good example of 

its application can be seen at <http://rapid.wrox.co.uk/books/1657>; 

look for text1.htm

Reprinted from the April 2002 issue of PC Update, the magazine of Melbourne PC User Group, Australia

[About Melbourne PC User Group]