Cascading Style Sheets...

Once your web site it up and running (or even while it is being designed), how do you quickly change the colour, the font (style and size) or even the layout of a web site without having to recode everything, which is both time consuming and costly? The easiest way is through the use of Cascading Style Sheets (CSS) files.

Style Sheets allow the HTML author to separate presentation definitions from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue. Microsoft led the way by implementing style sheet support in Internet Explorer 3.0, support which was greatly improved in Internet Explorer 4.0. Netscape also implemented Style Sheet support with the release of Communicator and Navigator 4.0.

"...
Cascading Style Sheets evolved as a response to the explosion of Internet content and the demand for a technology that enables the creation and maintenance of sites that contain lots of pages and complex page layout schemes.

Style sheets are a Web designer's dream because they allow you to make rapid and dramatic changes to all the HTML elements in a site. That means you can preview text, colour, and layout designs by simply editing their styles.

Another advantage of formatting pages with style sheets is that by reducing the amount of code required to format each page, the pages can be downloaded and read by the browser more quickly.
..." ¹

What are they?

Anyone who does a lot of work using a word processor should be familiar with the concept of style sheets. Basically, styles are defined and then applied to blocks of text (or even single characters) by referring to the definition in the available style range. Each style of text is assigned a "class" or set of style attributes. These attributes may include a "font-family", "font-size", "colour", "text-decoration", "text-align", and so on.

If you change the font-size using:

you should be able to see the text size decrease / increase. This is because the class associated with the text has been coded relative to the browsers default font - very important when thinking about Accessibility Issues of users.

I recommend and use classes and CSS files wherever possible.

1 -- Copyright © 2000, Allaire Corporation. All rights reserved.