Taking Advantage of a Style Sheet Template

I've mentioned a couple of times how style sheets allow you to cleanly separate the content (text, images, and links) on a web page from the manner in which is displayed. This means that your HTML code can focus solely on information, which is then rendered to the screen according to the rules you establish in a style sheet. Knowing this, it stands to reason that with the right style sheet, you could effectively create interesting web pages with very little effort.

A style sheet template is a reusable style sheet that solves a particular problem, such as allowing you to create a newsletter or a blog. Although Hour 21, "Create Your Own Blog," shows you how to use an online blog service to create a blog, I thought it would be neat to show you how to create a simplified blog yourself using nothing more than a style sheet template and some HTML code.

By the Way

If you're new to the world of blogging, allow me to clarify that the term "blog" stands for web log, and it just refers to a specialized web page that contains a sequence of articles by a certain person or on a certain topic. Political blogs have become quite popular, although there are blogs out there for practically every topic imaginable.

First off, it's important to understand that a blog in its simplest terms is just a series of short articles, kind of like mini news stories. Each blog entry typically consists of a title, a date and time, and the actual text of the entry. Blog entries are displayed in reverse chronological order, meaning that the latest (most recent) blog entry is displayed first on the page.

Figure 14.7 shows an example of a relatively simple blog page that is driven entirely by an external style sheet. You're about to see the style sheet behind this blog.

Figure 14.7. It is possible to create a simple blog using nothing more than some HTML code and an external CSS style sheet.

Taking Advantage of a Style Sheet Template

Coffee Break

If you want to get a feel for what other blogs actually look like, take some time to explore http://www.blogwise.com/. This site serves as a global directory for blogs, and it can be browsed by location or topic.

The HTML code for the blog shown in the figure is listed in Listing 14.5. It's important to note that the HTML code is entirely focused on the content of the blog and has virtually no concern with how it is rendered in a web browser.

Listing 14.5. This Web Page Relies Entirely on the `blog.css` Style Sheet for Its Layout and Formatting

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Big T's Hockey Blog</title>
    <link rel="stylesheet" type="text/css" href="blog.css" />
  </head>

  <body>
    <div class="pagetitle" id="top">Big T's Hockey Blog</div>
    <div class="author">Terry &quot;Big T&quot; Lancaster</div>

    <div class="entry">
      <div class="title">Predators Win Pre-Season Opener</div>
      <div class="datetime">September 23, 2005 - 10:17PM CST</div>
      <div class="text">My home team, the Nashville Predators, outplayed the
      Columbus Blue Jackets to win their pre-season home opener 3-2. Predators
      up and comer Alexander Radulov also scored a shoot-out goal to give the
      Preds a 1-0 win in the simulated overtime shoot-out. Things are looking
      bright for the young team under the new NHL collective bargaining
      agreement.</div>
      <div class="link">
        <a href="#top">&lt;&lt; Back To Top</a>
      </div>
    </div>

    <div class="entry">
      <div class="title">Music City Mafia Wins with Authority</div>
      <div class="datetime">September 21, 2005 - 11:09PM CST</div>
      <div class="text">My main recreational hockey team, Music City Mafia, won
      handily in one of the few blow-out games of the season thus far,
      dominating Gober's Goobers 7-2. The Mafia record improves to 2-3-2. Let's
      hope we have a few more wins in us to close out the season strong.</div>
      <div class="link">
        <a href="#top">&lt;&lt; Back To Top</a>
      </div>
    </div>

    <div class="entry">
      <div class="title">Music City Mafia Attacked By Monkeys</div>
      <div class="datetime">September 18, 2005 - 10:43PM CST</div>
      <div class="text">The Mafia boys were attacked by a rogue pack of wild Ice
      Monkeys tonight, and the result wasn't pretty. The 5-1 loss saw few bright
      moments, with one of them being a goal by Chet that was set up by Duke
      early in the game. It was downhill from then on, as the Monkeys proceeded
      to frustrate and aggravate the Mafia. Retribution plans are already
      underway!</div>
      <div class="link">
        <a href="#top">&lt;&lt; Back To Top</a>
      </div>
    </div>
  </body>
</html>

This code reveals that the blog makes use of seven style classes to organize its content:

pagetitle The title of the blog, centered at the top of the page in a large font.
author The author of the blog, centered at the top of the page just below the title.
entry A block-level element that is used to hold a single blog entry.
title The title of an individual blog entry.
datetime The date and time of an individual blog entry.
text The body text of an individual blog entry.
link A link within an individual blog entry that returns the user to the top of the blog page.

If you take a closer look at Listing 14.5 and Figure 14.7, you may see how each of these style classes maps to content on the blog page. If you're having trouble making the connection, maybe Listing 14.6 will help clear things up.

Listing 14.6. The `blog.css` Style Sheet Serves as a Reusable Template for Blog Web Pages

body {
  background-color:#FFFFCA;
}

div {
  font-family:Verdana;
}

div.pagetitle {
  text-align:center;
  font-size:24pt;
  font-weight:bold;
  color:#19619A;
}

div.author {
  text-align:center;
  font-size:16pt;
  font-weight:bold;
  font-style:italic;
  color:#19619A;
}

div.entry {
  background:#EEEEEE;
  border:3px solid #19619A;
  margin:20px;
  padding:10px;
}

div.title {
  text-align:left;
  font-size:12pt;
  font-weight:bold;
  color:#19619A;
}

div.datetime {
  text-align:left;
  font-size:10pt;
  font-style:italic;
}

div.text {
  text-align:left;
  font-size:11pt;
}

div.link {
  text-align:right;
  font-size:10pt;
  margin-top:10px;
}

a { font-weight:bold }

a:link {
  color:#19619A;
  text-decoration:none;
}

a:visited {
  color:#19619A;
  text-decoration:none;
}

a:hover {
  color:#3D9DE9;
  text-decoration:none;
}

a:active {
  color:#19619A;
  text-decoration:none;
}

This style sheet contains all the gory details for the previously mentioned style classes, along with a few extra style rules to help complete the blog effect. First off, the body selector is used to specify a background color for the entire page. A font (Verdana) is then established for all div elements, which means that the same font is applied throughout the page.

The specific style classes are then specified, beginning with div.pagetitle and div.author. The div.entry style class is interesting in that it sets a border and a lighter background color so that each blog entry stands out on the page. The remaining blog style classes all utilize various font settings to help improve the layout and readability of the blog.

The last few style rules in the blog.css style sheet pertain to links and how they change with mouse hovers and clicks. The text-decoration style property is used to prevent links from being underlined, and the color property is used to highlight a link when you drag the mouse over it.

You can easily make small tweaks to the blog.css style sheet and reuse it to create your own simple blogs. Of course, if you want a fancier, more professional blog then you may want to check out Hour 21.

Table of Contents

Taking Advantage of a Style Sheet Template