HTML and CSS Reference
Note We've kept the unordered list inside the same outer containing div with an id of tablinks , as we
did in the previous layout in Chapter 8. It's not always necessary to wrap the list in a containing div —you
could simply give the ul an id and manipulate that. We've also left class="current" on one of the links
for the purposes of getting the styling right, but we'll show you a smarter way of indicating what page you
are on later in this chapter.
The previous code would result in a dull-looking and entirely inappropriate list, as shown
in Figure 12-1.
Figure 12-1. The unstyled list: it needs a bit of work to become a navigation bar, doesn't it?
Removing Browser Default Styling
There's a process that we need to go through to get this list of links looking the way we want.
The first step is to reset some of the default styling that each browser applies to the list—for
example, the bullet points and the padding and margins. To see where these different parts of
the list item are located, take a look at Figure 12-2, which shows the block-level elements that
make up this list.
Figure 12-2. The list's structure revealed
You can see in Figure 12-2 that the unordered list, the ul element, has padding on the left
side; the individual list items have no margins, but the bullet icon sits outside of the list items.
At least, this is how the list items are understood by Firefox—other browsers may treat the
default styling of lists differently or to varying degrees, so the safest way to begin is to reset all
of it. The following CSS shows how you can do this (but only for lists that are in the div with an
id of tablinks ):