Styling Lists 101

This week I’ve been sharing some material I wrote as handouts for a CSS class at UNM Continuing Ed. Here’s the one about styling lists.

Styling Lists

Lists are probably the most useful element on the web. They make things easier to read and they are great for navigation.

Bullet/numeral styles

For list-style-type on an unordered list, the options are square, circle, disc and none.

For list-style-type on an ordered list, the options are lower-alpha, upper-alpha, lower-greek, upper-roman, lower-roman, none, and a few other language types besides English.

With list-style-image you can replace the bullet in an ordered list with an image.

li {list-style-image: url(bullet.gif);}

Position

You can set the list as inside or outside with list-style-position.

ul {list-style-position: inside;}

Lists for navigation

Here’s how to style a list that will display horizontally. First set the list-style-type to none to remove the bullets.

#nav ul {list-style-type: none;}

Next, make the list items display inline and float left. This will make the list items line up horizontally rather than going down the page vertically. You can also add background colors in this step. A little padding between the items is helpful so they don’t run together. You can also set a width here so the menu fits the width of your container.

#nav li {display: inline;
float: left;
padding: 2em;}

Finally make the link (a) elements display as block. You can also add borders, padding, colors and other styling in this step.

#nav ul li a {display: block;
text-decoration: none;}

See also: Selectors 101, Styling Text 101.