CSS and Lists

< Previous - Backgrounds and CSS | Quick CSS Course (5 days) | Beginning CSS Articles | Next - CSS Positioning and Layout >

In CSS there are two types of lists: numbered and bulleted (as opposed to HTML, which has the definition list as well). But there are different types of bullets and numbers you can define with CSS using the list-style-type property:

list-style-type: lower-roman;

• list-style-type

Sometimes, it's nice to have a custom bullet to use instead of the boring circle, square, or disc supplied as the default bullets. With the list-style-image property you can indicate a bullet image to use instead:

list-style-image: url(image.gif);

• list-style-image

Even the placement of the bullet and where the text will flow around it can be defined with CSS using the list-style-position property:

list-style-position: inside;

• list-style-position

But if you want to define all aspects of your lists in one place you won't go wrong using the list-style shorthand property:

list-style: alpha inside url(image.gif);

• list-style

< Previous - Backgrounds and CSS | Quick CSS Course (5 days) | Beginning CSS Articles | Next - CSS Positioning and Layout >