CSS Is Easy! | Sir Codex

Cascading Style Sheets. The name alone is intimidating, conjuring up images of cryptic code and syntax, too difficult for the layperson to grasp. In reality, however, CSS is one of the simplest and most convenient tools available to Web developers. In this article, I’ll guide you through the basics of CSS, showing how it can be applied to simplify the task of managing a consistently formatted Web site with minimal headaches.

The Problem with HTML

CSS is a language for defining the formatting used in a Web site. This includes things like colours, background images, typefaces (fonts), margins, and indentation. “But I do all that now with HTML tags,” you might think. “Why do I need CSS?” A valid question, and the best way to answer it is with an illustration of what is wrong with defining such styles using HTML.

A common design choice at present is to use a sans-serif font (like Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman, creating a complex Web page layout using a sans-serif font will often involve a lot of tags. With the nested table layouts that have become commonplace on the Web, it would not be uncommon to see ten or twenty tags simply dedicated to applying the same font to all of the text on the page. Multiply this by 5 pages for a modest site and we’re in the neighbourhood of one hundred tags. A beefier site might have 50 pages or more, in which case you’re looking at a thousand tags, all dedicated to applying that one basic, consistent style to the text of your document.

Now here’s the kicker: what if your client calls you late one Friday afternoon to say, “Verdana is nice, but everyone uses it. Let’s use Tahoma instead.” Fancy search-and-replace tools aside, you are now faced with the task of adjusting one hundred, one thousand, or even more tags to make what, from your client’s perspective, may seem like a very simple change. You can pretty much kiss that ski weekend you had planned goodbye. Try not to groan out loud â€“ it doesn’t go over well with most customers.

If you know your HTML, you may be thinking that the tag, which lets you set the default font to be used throughout a page, provides a nice solution to this problem. Even then, you’d have to adjust one tag for each page of your site. Add another font style to the equation (say you want to use a different font for that fancy navigation bar of yours), and the problem returns in full.

To this problem and others, Cascading Style Sheets are the solution.

Defining Styles with CSS

The basic principle of CSS is to allow the designer to define a style (a list of formatting details like fonts, sizes, and colours) and then apply it to one or more portions of one or more HTML pages using a selector. Let’s look at a basic example to see how this is done.

Consider the following HTML document outline:



 A simple page 


 
First Title
...
 
Second Title
...
 
Third Title
...

This document contains three headings, created using

tags. To make these headings stand out more, I have used tags to make them light blue in a sans-serif font (Windows browsers will display them in Arial, for example). Notice the repetition involved, even at this basic level. I had to specify the details of the font I wanted three separate times. Wouldn’t it make sense to define the font just once and then apply it to my headings? Here’s the CSS version:

  
  
 A simple page   
  
  
  
   
First Title  
...  
   
Second Title  
...  
   
Third Title  
...

All of the magic is between the tag, as follows:

The TYPE attribute specifies the language that you’re using to define your styles. CSS is the only language in wide use as of this writing, and is indicated with the value text/css. Another language that is only supported by Netscape 4.x is called JavaScript Style Sheets (JSS), and is specified by text/javascript. Due to the very limited compatibility of JSS, however, it is rarely of any use.

Since Web browsers are designed to ignore any tags they do not recognize, older browsers that don’t support CSS would normally output the CSS style definitions as plain text in the document. To guard against this, it is common practice to enclose the style definitions within an HTML comment tag:

While nice and simple, the