Laying the Groundwork

As usual, we'll need to dive into the markup of the project document—the better to understand what we have to work with—and get a peek at the document before we start adding CSS to it. Listing 8.1 gives us a detailed look at the markup for the weblog, and Figure 8.1 shows it in its raw, unstyled glory.

Listing 8.1. A Look at the Weblog's Markup

<div id="weblog">



<h3><span>Eric's Thoughts</span></h3>



<div class="entry">



<h4 class="title">

<a name="t20031125" href="/eric/thoughts/200311.html#t20031123"

  rel="bookmark">Hot Steaming Internet</a>

</h4>

<h5 class="date">

Tuesday, 23 November 2003

</h5>



[...entry content...]



<ul class="moreinfo">

<li class="categories"><a href="/eric/thoughts/wifi">WiFi</a></li>

<li class="comments">No comments</li>

<li class="pingbacks"><a href="/eric/thoughts/pingbacks/t20031123">3 

 Pingbacks</a></li>

</ul>



</div>



[...more entries...]



</div>

There are a few things to note in particular:

• The weblog's title ("Eric's Thoughts") is contained in an h3 element and a span element. This gives us two elements to work with when styling the title.

• Each entry is enclosed in a div with a class of entry. This effectively groups all of the information related to a single entry into one piece of the document structure.

• The title and date of a post, while given unique elements to contain the content (h4 and h5, respectively), have also been classed. This will allow us to style these aspects of an entry without worrying that an h4 or h5 might one day be used in the main text of an entry.

• In a like manner, the extra information, contained in an unordered list, has been classed in a manner that will make each piece easy to style independently of the others and without letting the styles leak into the main text of an entry.

We'll take advantage of each of these points, and a great many other things, as we make these entries look better than ever.