XHTML is the correct way to write web pages — unlike basic HTML, it’s designed to be compatible with future technologies. One of the major differences between basic HTML and XHTML is a DOCTYPE declairation at the very top of the document.

Here’s a basic XHTML webpage:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>a simple xhtml document</title>
</head>
<body>
 <p>a simple paragraph</p>
</body>
</html>

Another key thing about XHTML is that it contains no information about how the document should look — it only has information about what the information means.

To control how the page displays, you use Cascading Style Sheets, or CSS. You can put CSS information directly in the head of a webpage, but it’s much more convenient and powerful to put your CSS into a document of it’s own and link to it from the head of your XHTML document.

You can use this code to link your stylesheet:

  <link rel="stylesheet" href="style.css" type="text/css" />

 

Here’s the basic XHTML document with a link to a stylesheet named “funky.css”:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>a simple xhtml document</title>
   <link rel="stylesheet" href="funky.css" type="text/css" />
</head>
<body>
  <p>a simple paragraph</p>
</body>
</html>

 

So that’s XHTML… What does CSS look like?