From a wife handing a
husband a grocery list as he steps out the door to a music channel presenting
their top 100 worst songs of all time, lists help people stay focused and
organized. In web design, it's the same case. HTML lists facilitate the
presentation to our site visitors with organized content.
HTML lists, which group key elements together, can be ordered
or unordered. Both types of lists are appealing in part because of the way they
appear on the page. List items typically are indented and are keyed off by a
marker, usually a filled circle for an unordered list or numbers for an ordered
list (see Figure 4-1). With a
few lines of HTML, a web coder can create a bulleted list on a web page without
opening an image editor. Through CSS, you can create even more visually
compelling lists.
Figure 4-1. The default rendering of a list
With a little CSS magic, we can tailor the presentation of the
list to complement the design of a web page instead of relying on the browsers'
default styling. While Chapter 3 covered navigation lists,
this chapter illustrates how to change the numbering of list items, use your own
image for a list marker, create a hanging indent that doesn't use a list marker,
and more.
