This is the way the page looks without use of CSS. For the original, CSSified version, click here.
Not long ago, everyone who created and maintained Web sites, whether private sites or corporate ones, avoided exploiting the special features, the bells and whistles, that the newer browsers could handle. Web sites were generally quite plain and unadorned. They were rather like the packaging of generic products sold in supermarkets some years ago.
There were good reasons for this.
Users weren't upgrading their browsers regularly to the newest model. That was true even of people using their work computers to surf the Web. So the newer features wouldn't work at all on their browsers. If a Web site used those newer features, in some cases, its content didn't show up at all on those older browsers. In other cases, it showed up, but in some weird way, even illegibly.
Another problem was the notorious browser wars. Or more accurately, the notorious browser war on standards. The people who created the browsers tended to ignore the people who created the standards - the details sets of specifications describing exactly what HTML tags were permissible, what they should look like, and how they should be displayed in browsers.
When Netscape was the standard browser - indeed, the only one most people knew about or used - this wasn't really a problem. You could write your Web page HTML based on how the result would look in Netscape. That was a reasonable and safe thing to do. When users wanted some new HTML capability, Netscape sometimes eventually added it. Eventually, that new aspect of HTML found its way into the HTML standards, although not always in the same form.
Then Microsoft decided to kill Netscape and take control of the browser market with its own browser, Internet Explorer. Eventually, they succeeded. Along the way, they followed standard Microsoft practice: they frequently ignored what standards there were and introduced their own additions to HTML, knowing that their market dominance would ensure that what they did would immediately become the de facto standard anyway.
The practical result was that an HTML page might look one way in Netscape but look very different in Internet Explorer. The simple, basic HTML tags weren't the problem, for the most part. The differences came from the extensions - the added capabilities - that Netscape had but Internet Explorer didn't, and vice versa
So for a while, people writing HTML had to worry about how their pages would look in the Netscape browser and in Microsoft's Internet Explorer. If they were conscientious, they also worried about how it would look in the theoretical completely standards-compliant browser that might appear at any moment. For many people, the simplest and safest route was to limit themselves to fairly basic HTML and scrupulously avoid any extensions provided by Netscape or Microsoft, except for those rare cases where the two companies had agreed, astonishingly, to add some new capability to HTML in precisely the same way. The result was the generic-packaging look.
Netscape disappeared, and Microsoft dominated for quite a while. Other browsers, such as Opera, appeared and made small inroads. Recently, Firefox has made larger inroads - large enough that the old-style browser wars are raging again. (For a more detailed and no doubt far more accurate history of all of this, see the Wikipedia article Browser wars.)
At the same time, users became much more open to the idea of constantly upgrading their browser to the newest version. So now, not only do different users have different browsers, they even have different versions of the various browsers. All of the above problems with HTML - differing flavors, different appearance in different browsers - also apply now to JavaScript and CSS. You could say that the argument for the generic-packaging look is stronger than ever.
Corporate Web sites try to avoid this problem by setting lower limits for the browsers they support. If you try to view such a site with anything other than, say, Internet Explorer 6.0 or a later version, some parts of the site will either look very odd or may not show up in your browser at all. More than that, some capabilities of the site that require certain JavaScript functions simply won't work. When you look at such a site with an older browser, or some oddball browser a friend recommended to you, you may get a message telling you that your browser is not on the approved list and that you should go away and come back when you've downloaded and installed the browser the site insists on. Similarly, they'll require that you have JavaScript turned on in your browser.
Corporate Web sites may feel they can afford to do that, but you really can't. To you, every visitor is precious and must be accommodated. Well, not really. There are limits to how accommodating you can practically be. But unless your site already gets millions of visitors a year, you have to be a lot more accommodating - which is to say, welcoming - than a corporate Web site.
As is generally the case when one is talking about designing a personal Web site, there aren't any hard and fast rules in this area, only general guidelines. If you own an HTML book that says it's for HTML Version 4.0, go ahead and use it. If your book says it's for HTML Version 2.0, you should probably buy a newer HTML book. If it says it's for HTML Version 3.2, keep it and use it and don't replace it with a newer book. Unless you want to use CSS.
This isn't the right place for a manual about using CSS, and I'm certainly not the right person to write such a manual. Instead, let's limit ourselves to discussing why you should use CSS sparingly if you use it at all.
You can do some really nice formatting by using CSS. You can also use CSS to do much fancier things than mere formatting. Formatting is permissible, but the fancier things are highly inadvisable. Here's why.
If you use CSS to set fonts, colors, and margins, as I have done with these pages, your site should look pretty much the same in all of the major modern browsers. If someone is using an older browser that can't handle CSS, he'll still see pages that are perfectly readable; they'll just have the generic-product packaging look. Since people using those older browsers expect Web pages to have that generic look, they'll see nothing amiss with yours. (Click here to see what this page might look like in such an older browser. Use your browser's back arrow to get back here.)
However, if you use CSS for fancier effects, all bets are off. Even a fairly simple effect, such as the one I tell you about in the section titled Fixing the Navigation Bar with CSS, simply won't work in an older browser. That particular effect, simple though it is, won't even look entirely the same in all modern browsers. More complex effects, such as DHTML, which uses JavaScript in addition to CSS, also won't work in older browsers and may not look the way you expect in all modern browsers. (When I say "won't work in older browsers," I mean that those browsers may display very odd things on the page or, more likely, simply won't display important parts of the page at all.)
If you adhere to these guidelines, your site won't be as visually exciting as it could be. (For that matter, these guidelines will also help keep your site from being visually congested, jangly, annoying, or repulsive.) But remember that visual appeal only holds the viewer's attention for a limited amount of time. What keeps visitors reading your pages, and makes them come back eagerly to see if you've added new pages, and causes them to tell their friends about your site isn't what it looks like but what it says. Content, in other words.
So make the site attractive but put most of your effort into the text you write for it.