CSS and Non-CSS Browsers

When the CSS standard was created, a great number of people were still using browsers that did not support style sheets (many still are). Web developers need to be able to create Web applications using style sheets for the new browsers and yet still have these applications present properly in browsers that do not support style sheets.

This might sound like an impossible task, but it is actually quite simple. Web browsers will ignore any tag or attribute they do not recognize. Thus, you could put the following tag in your HTML code without causing any errors:

  <Jake>This is my tag</Jake>

The browser will ignore the <Jake> tag and output This is my tag to the browser. Taking advantage of this browser characteristic is the key to using style sheets.

A style sheet is a document that defines what the elements in the document will look like. For example, we can define the <h1> tag as displaying the normal font at 150 percent of the default h1 size, as shown here:

      h1 {font: normal 150%}

The style definitions do not have to be contained in a separate document; you can place the style definitions in the same document as the HTML code that will use these definitions. To support both CSS browsers and non-CSS browsers, it's recommended that the style sheet be referred to as a separate document.

In browsers that support style sheets, this definition will display all content within <h1> tags in the document in the normal font at 150 percent of the default h1 size. If the style definition is saved in a document named MyStyle.css, you can use this style in your HTML page by including the following line of code:

  <link rel=MyStyle.css>

Browsers that do not support style sheets will not know what the <link> tag is, nor will they know what the rel attribute is. These browsers will simply ignore the <link> tag and use the default settings associated with the h1 element. Browsers that do support style sheets will recognize the tag, access and read the style sheet, and present the h1 elements as defined in the style sheet (unless the style definition is overridden locally in the HTML page).

The specification for the latest version for CSS can be found at http://www.w3.org/TR/REC-CSS2/. You can use style sheets to do much more than simply override the standard HTML tags.