4.7. Styling Lists

Our standard navigation list can benefit from a little more styling. By default, the bullet points are small black blobs, but you can change these easily to different predefined shapes. Let’s head back to our project’s stylesheet to see how this works.

Figure 4-40. Applying different list-bullet styles in CSS—even none

It’s possible to use CSS to style lists to a greater extent, including:

• making the links appear as buttons by utilizing the CSS border and padding properties

• creating a larger clickable area for the link (rather than just the text itself)

• setting list items out in a horizontal line

These more advanced techniques are discussed and explained thoroughly in The CSS Anthology: 101 Essential Tips, Tricks & Hacks by Rachel Andrew. The book devotes almost a whole chapter to styling navigation, and presents many styles that you can try out. I strongly advise you to grab a copy if you want to learn some really cool CSS tricks (once the basics are under your belt, of course!).