11.1. Basic List Styling With CSS

The navigational list menu that appears on the front page of the Footbag Freaks site is created with the following basic HTML:

<ul id="mainnav">
  <li><a href="categories.htm">Category One</a></li>
  <li><a href="categories.htm">Category Two</a></li>
  <li><a href="categories.htm">Category Three</a></li>
  <li><a href="categories.htm">Category Four</a></li>
  <li><a href="categories.htm">Category Five</a></li>
</ul>

Before we apply any CSS rules to this list, it would display as shown in Figure 11-2.

Figure 11-2. Basic Unformatted Link List

About what you'd expect, right? It's a standard unordered list with an unadorned ...

Get HTML Utopia: Designing Without Tables Using CSS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.