How to use Style Sheets

How to use Style Sheets
Add Cascading Style Sheets to your pages

Occasionally, you may visit a web page that works fine with one Web browser and has a problem with another. Unfortunately, the problematic web browser is typically Netscape 4.,x, which is still used by around 20 percent of the market, despite the fact that it does not support many of the features of Internet Explorer or, indeed, the HTML 4.0 standard on which Internet Explorer is loosely based.

If you do encounter such a problem, the issue may not be one you can fix at your end, other than not using Netscape to view that particular page. Most often, the problem occurs due to a server configuration error on the server side. For example, the directory in which "index.html" page resides on that server could refer to a missing  CSS (Cascading Style Sheet) page. This file is called "Normal.css" and, if it is missing, Netscape 4.x will fail to load the page due to a programming error. IE ignores tags it does not understand, as web browsers are supposed to do.

To work around this problem, and other issues related to Netscape's faulty CSS implementation, some websites (PCBuyersGuide.com, for example) build the style sheet directly into the web page, as in the following code, which would typically be inserted in the <HEAD>area of a page:

<STYLE>

<!--

body{font: 10pt Helvetica, Arial; text-decoration: none; color:#000000; }
tr{font: 10pt Helvetica, Arial; text-decoration: none; color:#000000; }
a:link{color:#0000FF; text-decoration: none; cursor: auto;}
A:visited{color:#662299; text-decoration: none; cursor: auto;}
A:hover{color:#400080; text-decoration:underline; background-color:#6699FF;}

-->

</STYLE>

The <!-- ... --> tags allow a CSS-challenged browser to ignore the unknown tags, avoiding unwanted on-screen display of the style text itself. On a browser that correctly interprets the above code, the CSS style sheet allows links to light up with a light blue background color (#6699FF) when the mouse pointer hovers over them. Body text is displayed as 10pt Helvetica (or, if Helvetica is not found, Arial) instead of the usual serif font (typically Times New Roman).

Here's a link to a short Normal.css file for you to see what it looks like as an external file. The main reason people use externally loaded CSS files instead of style definitions right on the page itself is to facilitate site-wide style updates. As I'm sure you can imagine, if all pages referenced the same style sheet, and the style sheet were updated to display a different style, all pages would therefore immediately reflect the update!

The reason I know this is because I had the same problem on my server at one point last year. It is a great example of why Web page authors must always test their pages with different browsers!

Post new comment

More like this . . .

Instant Messaging

With new tools from Microsoft, AOL and the rest Introduction Instant Messaging (known as IM) is, for many computer users, a killer app. It tells them...

Shopping on the Web

Want to get started shopping on the Web? Start by updating your web browser to the newest release, for additional security and support for 128-bit...

Managing Spam

Want to reduce the amount of junk mail you receive? You're not alone. Reducing Spam Q: How can I find out who is sending me all this junk mail? A:...

Managing your E-mail

Want to back up your address book or move e-mail messages over to a different computer? Here's help. Outlook Contacts - Moving data files Q: What is...

E-mail Alternatives

If viruses and other threats targeting Outlook and Outlook Express have you looking for a safer e-mail alternative, start here.... Introduction There...

Anti-Spam Rules

For Spam Detective and other rule-based email filters MailShield (formerly known as Spam Detective), as noted in our report on Managing Spam,...

Protect your kids

Protect your kids from the seedy side of the Web Net Nannies and Safe Surfing If you've ever used an Internet search engine to search for a word that...