Unordered Lists

Unordered lists begin with opening <ul> tag with the individual list items <li> .... </li> contained within and ends with the closing </ul> tag. An example of the coding for an unordered list looks like this:

The unordered list properties allow you to control the appearance of your lists by choosing a "marker" (such as a disc, circle, or square) or by setting a small image. You can also then determine where the marker is placed.

There are three properties used to control the appearance of an unordered list:

• list-style-image
• list-style-type
• list-style-position

It is important to note that both unordered and ordered lists use the same <li> tag within it. When you define a style for lists, you must define the both the type of list as well as the list item. If you don't, then all list items would look the same whether they are in an ordered or unordered list.

List-style-image: The list-style-image property lets you use a small graphic image in place of a bullet in a list. A typical rule would look like this:

Because list items can have up to three levels of bullets, you can define a different bullet for each level. For second and third level bullets, your style coding would look similar to this:

List-style-type: The list-style-type property controls the type of bullet used for list items. The possible values are disk, circle, square, and none. You can also define a different type of bullet for all three levels as follows:

List-style-position: The list-style-position property controls the alignment of text with respect to the list item bullet. The two possible values are inside or outside. Inside aligns subsequent lines of text with the bullet. An outside value causes subsequent lines of wrapped text to line up with the first letter in the first line of text.