An ordered list, ol, is a list whose items are marked with numbers.

An unordered list, ul, is a list whose items are marked with bullets.

By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them.

To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.

Customizing Unordered Lists

Plain bullets are dull and may not draw enough attention to the content they accompany. You can fix this with a simple yet effective technique: remove the default bullets and apply a background image to each list item.

Here is the CSS for custom bullets:


Using Unordered Lists for Navigation

Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu.

HTML: begin with a simple unordered list, with links for each list item.

CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.

(Visited 22 times, 1 visits today)