List Styles O’ Plenty ....................................................................................
Lists, of course, are the simpler cousins of tables. Instead of items spread out
in two directions — both horizontal and vertical — as in a table, a list limits
itself to a simpler horizontal stack of items. A list is like a single column in a
table. And because it’s a simpler format, lists normally don’t need the help of
borders to frame the individual cells. Bullets, dingbats, or numbers generally
serve to visually separate one list component from the next.
But lists do have their uses, as Martha Stewart would surely agree. (I’ve long
suspected that Martha has so many lists that she probably needs a master
list of all of her other lists.)
CSS allows you to manipulate lists in many ways that are not possible in HTML.
You can use one of three graphic symbols as bullets with an unordered (also
known as an unnumbered or bulleted) list. Obviously, even a list with bullets
is not haphazard, as the term “unordered” suggests. The three symbols are
Disc:the most common symbol, a black, filled dot, and it’s also the
default CSS list style
Circle: an empty outline of a circle
Square:a filled square
Here’s code that produces Figure 12-1. Notice that I didn’t specify the first
style, but instead simply used the <ul>(unordered list) element. That’s
because the disc (a dot) is the default unordered list style:
<html>
<head>
<style>
body {font-size: large;}
</style>
</head>
<body>
<ul>
<li>first
<li>second
<li>third
</ul>
<ul style=”list-style-type: circle;”>
<li>first
<li>second
<li>third
</ul>
208 Part III: Adding Artistry: Design and Composition with CSS
