XHTML and CSS: a union made in... well the W3C anyway

Because I sit all day hammering out code, I have to make a real effort to get enough exercise. What I often like to do is download and listen to a great weekly podcast, that is offered in both MP3 and WMA format, that is a recording of a show called .Net Rocks while I am taking my daily jog. This week’s show featured Rory Blyth and Scott Hanselman who discussed at length a great site, csszengarden.com that demonstrates the use of XHTML and CSS for website design. To date, I have used CSS primarily for font formatting, but not much else. However, a combination of both the show and the csszengarden web site have caused me to take another look at CSS (Cascading Style Sheets) and a new look at XHTML (Extensible HyperText Markup Language).

First, let’s discuss XHTML. According to the World Wide Web Consortium, or better know as the W3C, "XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents." The W3C goes on to highlight certain aspects of XHTML. Of particular note to me was:

XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.
XHTML documents can utilize applications (e.g. scripts and applets) that rely upon either the HTML Document Object Model or the XML Document Object Model [DOM].
As the XHTML family evolves, documents conforming to XHTML 1.0 will be more likely to interoperate within and among various XHTML environments.

Moreoever, some of the differences of XHTML with HTML is that XHTML documents must:

be well-formed XML;
use lower case for all HTML element and attribute names;
All elements other than those declared in the DTD as EMPTY must have an end tag;
All attribute values must be quoted, even those which appear to be numeric;
Empty elements must either have an end tag or the start tag must end with />. For instance, <br/>

Now a more familiar animal to me, CSS or cascading style sheets. A good definition comes from the good folks at the W3C that state, "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." Next, let's go ahead and look at a brief demo of the power of XHTML and CSS.

As pointed out by the guys on .Net Rocks show, you can have one XHTML page and various CSS files that each can give the XHTML page a varied look. I put together a brief XHTML page and two CSS files to better learn how this can be done. Here is the XHTML code, xhtmlFirst.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
     <title></title>
         <link rel="stylesheet" type="text/css" href="m2First.css" />
     </head>
     <body>
          <div id="header">M Squared Web Header Text<p></p>
          </div>
          <div id="main">
               <p>Here is the body text</p>
          </div>
          <div id="footer">M Squared Web Services Footer</div>
     </body>
</html>

As you can see there are three sections: the header where the page header resides, the main section where the body of the page exists, and the footer is where, you guessed it, the page footer markup is contained. Next, we will look at the first CSS file, m2First.css

BODY
{
     font-size: 12pt;
     background: url(images/m2backGround.gif) white no-repeat center center;
     color: black;
     font-family: Cursive;
}

#main
{
margin: 2em 2em 22em;
}

#header
{
     font-weight: bold;
     font-size: 16pt;
     color: black;
     background-color: whitesmoke;
     text-align: center;
     border-bottom-style: double;
}

#footer
{
     color: white;
     border-top-style: solid;
     border-top-color: gray;
     background-color: navy;
     text-align: center;
}

The CSS file consists of an HTML selector for the Body markup of the XHTML page. The rest of the CSS file contains a header ID selector for the header, a main ID selector for the main, and a footer ID selector for the footer DIV tags of the XHTML page. To see what is produced by the union of xhtmlFirst.htm and m2First.css, click HERE.

Now let's look at a different CSS file, m2Second.css:

BODY
{
     font-size: 14pt;
     color: black;
     font-family: Arial, 'Book Antiqua' , Century, Sans-Serif;
}

#main
{
margin: 2em 2em 18em;
}

#header
{
     background-position: left top;
     font-weight: bold;
     font-size: 16pt;
     background-image: url(images/header.gif);
     color: navy;
     text-indent: 40pt;
     border-bottom: gray solid;
     background-repeat: no-repeat;
}

#footer
{
     border-right: black thin solid;
     border-top: black thin solid;
     font-size: 9pt;
     border-left: black thin solid;
     border-bottom: black thin solid;
     background-color: gainsboro;
     text-align: center;
}

Again, this CSS file consists of the same sections with different property : value settings.

Finally, we will combine xhtmlSecond.htm and m2Second.css. xhtmlSecond.htm has the same exact code as xhtmlFirst.htm. To see what is produced by the union of xhtmlSecond.htm and m2Second.css, click HERE.

As you can see, with just the switch of a CSS file you can have a completely different look, without touching a line of XHTML. The result is code resuse, ease of maintenance, and adhereance to standards.