HTML and CSS Reference
In-Depth Information
#tablinks a {
display:block;
padding:5px 10px;
}
#tablinks a:link,
#tablinks a:visited,
#tablinks a:hover,
#tablinks a:active {
color:white;
text-decoration:none;
}
#tablinks a.current {
background:#047070 url(tab-bg-hover.gif) repeat-x top;
}
The final result is shown in Figure 12-5.
Figure 12-5.
The CSS-styled list is complete.
In this example we've demonstrated a specific application of CSS and list items, but one
that you're likely to use often (and, indeed, one that you might have approached using another
method, such as the
div
layout or, heaven forbid, a table layout). There are so many other
things you can do with a list in CSS, as we will demonstrate next.
Custom Bullets
The browser's default styling for lists is not entirely inspiring. Figure 12-6 shows a nested list in
IE 6 for Windows by way of example with different symbols displaying at the various nesting levels.
Figure 12-6.
A nested list showing the browser default bullet styles
You can override the default style using the
list-style-type
CSS property. There are
many values that can be applied, theoretically (such as Japanese ideographs), but you're most
likely to stick with just a handful:
