If you ask me, it's 2002, and eComStation and OS/2 can take part of these new technologies. It's time to leave Netscape 4.61 behind. See the "Browser Update Campaign" [webstandards.org] for modern browsers that will render these pages beautifully. For eComStation and OS/2, Mozilla [mozilla.org] will do fine.

The point is, with today's browsers, it is no longer necessary to rely on then ugly HTML TABLE and FONT tags to make a page look good. And yes, you should get rid of frames completely too. CSS finally allows you to separate content from style.

If you are running Mozilla, you can see the power of CSS by selecting the alternate stylesheet I have designed for printing. Select "View" -> "Use Style" -> "Print", and you will notice that the line height changes, all red text turns to black, and that the red box on the right disappears. That style is automatically used when you print pages from this site as well. Select "File" -> "Print Preview" to verify that.

After I came up with the idea to redesign these pages using CSS, I found that many professional web designers had the same idea already, and that there's a plethora of interesting resources on the web.

As a starter, you might want to look at these sites:

• The Web Standards Project [webstandards.org]
• To Hell With Bad Browsers [alistapart.com]

which basically tell you why CSS is a Good Thing [tuxedo.org].

If you are designing web pages yourself, see the following:

• Guide to CSS [htmlhelp.com]: Tutorials and quick references from the Web Design Group. Excellent stuff for getting started. Also has a CSS Properties list which I find easier to use than the W3C reference (below).
• CSS1 Specification [w3.org]: the official thing from the W3C. Not for starters, obviously.
• CSS Layout Techniques [glish.com]: examples of simple, yet powerful CSS layout and getting browser support right.

The HTML source of these pages does not contain any formatting information. Instead, the red box on the top right is separated from the rest of the page by putting it in a DIV section, and the default style sheet assigns it the float: right; attribute to make the rest of the page float around it. You can take a look at my stylesheets (screen.css and print.css), if you want.

To incorporate these stylesheets into the HTML, every page has the following in its HEAD element:

<!-- Netscape 4 cannot understand @import, so this
disables the broken CSS support on Netscape 4.x -->
<style type="text/css"><!--
@import "screen.css";
@import "print.css" print;
--></style>
<!-- alternate stylesheet for Mozilla; Netscape 4.x
ignores this also because of "alternate" -->
<link rel="stylesheet alternate" type="text/css" title="Print (no boxes, all black)" href="print.css">