Design Oahu

Web design blog from the middle of the pacific.

Using valid XHTML markup with CSS (part I)

A question that still often comes up is how to turn your table based image sliced layout into a valid XHTML/CSS design? The answer is quite complicated and is why I will be going over it in several tutorials, but I will start by giving you some reasons why you should do this.

  • Adding your style information to a Cascading Style Sheet (CSS) file rather than inside your HTML markup allows a visitor of your website to download all the style information the first time they visit your website. That means that they will have a slightly longer page load the first time they visit, however the styles are now cached on the client side and subsequent page requests can load up lightning fast as the style information has already been downloaded.
  • By moving your style information to an external file, you have now separated the content from the design. Previously if a request to change the background color of a container was made, you may have had to fire up Photoshop change the color in the layer, and re-slice the images. With CSS you would simply change the background-color element to the desired change and it would change all pages that reference your stylesheet.
  • Markup is straight forward and easy to figure out where a possible text change is located. If you need to fix a simple spelling mistake for example, rather than searching through all the <tr> and <td> to find where the misspelled word is you would simply look for a <div id=”sidebar”> tag to quickly get to your sidebar for example.
  • Having valid markup is the first step towards accessibility. Accessibility is the idea that someone is able to view your website regardless of their platform (mobile phones, old systems, screen readers, etc). Plus you can refine each of these by simply adding a new stylesheet which specificly target that platform.

OK, before we can dive in and start dissecting our table based HTML code, we need to understand a few of the differences between HTML and XHTML. First let’s start from scratch with an empty XHTML markup shell.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is the title of our page</title>
</head>
<body>
<h1>This is our header</h1>
<p>This is a <strong><em>paragraph</em></strong>.<br />This starts a new line.</p>
</body>
</html>

You should notice that basically the code is the same. XHTML is HTML, the only difference is that there is more rules that you must follow. For instance the first tag is our Document Type Definition, in this case we are using the “XHTML 1.0 Strict” type. What this does is tell the browser that what follows is going to be good ‘ol XHTML markup. The meta tag included just specifies what type of encoding to use for the text, I always use the UTF-8 character set as it will work for all languages to help future proof your content. You may have been used to just starting off with an <html> tag, but never used a </html> tag at the end to close it. For valid XHTML you must close every tag. This includes empty elements such as the line break, or horizontal rule. You do this by adding a space, then a forward slash as shown above. You should have also noticed that all tags are in lowercase. This is a must, where as HTML it was an option. Another issue is that the tags must be properly nested. You will notice the word “paragraph” above in the code is bold and italic, which uses the new tags <strong> which replaces <b> and <em> which replaces <i>. The strong tag surrounds the em tag. It would become invalid if you specified as: <strong><em>paragraph</strong></em>.

A lot of the time these issues would creep up when using Dreamweaver, FrontPage, GoLive, etc. in the Design Mode, but nowadays Dreamweaver does a pretty good job of correctly adding valid markup. GoLive and FrontPage are no longer in existence, so stop using them :-P. Before I wrap up part one of this series, let me add a style sheet to our basic XHTML template. Below is our base file again, lets now give it a name of “index.html”:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is the title of our page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>This is our header</h1>
<p>This is a <strong><em>paragraph</em></strong>.<br />This starts a new line.</p>
</body>
</html>

You see that we added a link tag to specify that we have a stylesheet which will be included. This includes a stylesheet named style.css from the same directory as the index file. Here is our simple style sheet which just changes the background to black and the text to white.

body{
background-color: #ffffff;
color:#000000;
}

This is the simplest stylesheet ever, but we have to start somewhere. The colors are specified in hex code. You can find the codes you need at Color Schemer which will also help you to come up with complementary colors to use throughout your site.

Well that is the end of part I in using XHTML and CSS series. If you are currenty wanting to change from a table based design to valid XHTML/CSS markup feel free to send me an email: jeremy {at} designoahu {dot} com and maybe I can redo your website for you and use it as the example in this series.

Go to Part II.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

Leave a Comment