Separating Design From Content
The last bit of theory we're going to hit on here is to talk about separating design from content. This refers not only to a physical separation, but also a logical separation.
Physical Separation
While it's possible to place CSS styles right into the head tag of your webpage, it's best to create a separate CSS file to hold your styles and refer to it from your XHTML. The goal here is consistency. Your website may consist of 20 pages. It may consist of 200. But as long as they all refer to the same CSS file you can make a sweeping design change by altering only one file and maintain a consistent look across all the pages in your site. This is accomplished using the "link" tag.
<html>
<head>
<title>Link Tag Page</title>
<link rel="stylesheet" type="text/css" href="/my_css_file.css" />
</head>
<body>
</body>
</html>
From there on out, any changes to "/my_css_file.css" will be reflected in the design on any pages that include that CSS file.
Logical Separation
The logical separation is a much more ambiguous thing to describe. Your XHTML file should only contain the information necessary to describe the structure of the site, not the look of the site. Leave all the looks to the CSS file. To encourage this, it's important to use class names and object ids that reflect what they are, not how they look.
In that vein ... the wrong way:
css:
.red {color: #FF0000;}
xhtml:
<p class="red">Error! The file didn't load!</p>
The right way:
css:
.errormsg {color: #FF0000;}
xhtml:
<p class="errormsg">Error! The file didn't load!</p>
In the first example, if you ever changed your design and needed to change your error color to make error messages stand out more, you're stuck with a tag that still describes the item as "red." In the second example, the XHTML doesn't care what the color is. It only needs to tell the browser "this is an error message" and then the browser asks the CSS what an error message should look like.
It's a subtle distinction, but one you'll need to make to prevent yourself from going insane.