Why XHTML/CSS?

Simply put, for a long time I was writing non-standard HTML with no usage of CSS. I was using tables haphazardly, sometimes it would look right but most times not.

Then I found XHTML 1.0 and CSS.

But this doesn't mean anything, since bad HTML will display in most browsers since the browsers are being mostly forgiving for bad markup. But the point is, I am rather sick of having to tweak and hack a page to make it look right in every browser. Valid HTML (and CSS) put the burden on the user's browser and not me. This means that any compliant browser will render the page the same each and every time - providing the source is valid! By valid I mean that the page adheres to the standards set by the W3C (and other bodies).

Why go through the trouble? you might ask? Simple. The main idea behind XHTML and CSS (and really the direction web development is headed) is to separate style and content. Those two words - "style" and "content" - are pretty major words and crop up a lot. Content is defined as what information you want the user to see on your webpage. Style is how that information looks. The phrase "separation of style and content" means that all of your content is separated from your style in the way that you use an external style sheet or a separate area to keep all "browser directives" that tell the browser how to format your information. But why? Simply to make the page easier to update! Take this segment of "old" HTML:

<font size="+1" color="red">Larger red text</font>

(fig. 1)

With CSS it can become:

.redlarge {
  color: #ff0000;
  font-size: 110%;
}

In the <body> section: <span class="redlarge">Larger red text</span>

(fig. 2)

But why does it matter? They do the same thing and certainly figure 1 illustrates smaller code! The reasoning is, what happens if you want to update the style: Some time later you decide that you want normal sized white text. With the first definition you must go through your document and replace every size and color attribute. If you had used the CSS version (as shown in figure 2), your search and replace would be done in about 10 seconds. And now I will argue that the second version, when used on a large scale, will actually be more economical to use! This point (updating) becomes more obvious when dealing with complex sites that have complex layouts.

In the old style a layout such as this would have been done with a table and some JavaScript to force the menu on the side to stay put. With CSS its done with one line:

position: fixed;

(fig. 3)

Its almost a waste of a code block to do, really. I won't even write the JavaScript equivelant...

Open up the source of this page and you will not see any tables at all. And with good cause! Tables are for tabular data, such as a spreadsheet and not for making layouts in a webpage. How messy is it to update a table and to entirely eliminate a table from your layout as in a resdesign? With CSS you change the one style sheet that deals with layout (style.css, on this site) and (if your MarkUp is done well enough) your design will be different. Call me crazy, but that seems a better way to go than to figure out how to align tables so that every thing looks "just right."

Its more than just ease of updating, of course, placing the burden on the browser forces noncompliant browsers out of usage. This Is A Good Thing - kind of a survival of the fittest model wherein the old browsers (such as Netscape 4.76 and early versions of every browser) are phased out as new standards come into play (such as XHTML and CSS2). CSS Also allows the browser to change its magnification (like Opera can do) without horribly mangling page layout.

To anyone serious in web design I would strongly suggest that they learn to write good code that is organized and is standards compliant.

Organized, however, does not imply "good." In fact, what makes "good" XHTML? Or maybe that's being asked backwards: "What makes XHTML good?" Every valid XHTML document is a valid XML document, which can lend itself to importing into a database rather easily. Not to mention the possibilities of using XSLT to transform your document into any other type of XML document become available. And that is really handy.