CSS List Properties

Need a bulleted list and want to control what the bullet looks like or a numbered list that shows roman numerals rather than plain numeric ones? Control it all through CSS.

There are three different types of lists: Unordered lists which typically display some type of bullet, Ordered lists which follow an alpha or numeric sequence, and Definition lists that consist of a term and its definition.

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:

css
  1. <ul>
  2.     <li>This is the first item</li>
  3.     <li>This is the second item</li>
  4.     <li>This is the third item</li>
  5. </ul>

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:

css
  1. ul li {list-style-image: url('images/bullet.gif');}

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:

css
  1. ul li li {list-style-image: url('bullet2.gif');}
  2. ul li li li {list-style-image: url('bullet3.gif');}

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:

css
  1. ul li {list-style-type: disc;}
  2. ul li li {list-style-type: circle;}
  3. ul li li li {list-style-type: square;}

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.

Ordered Lists

If you have ever had to do an outline for a school paper, you are already familiar with ordered lists. These follow a numerical and/or alphabetical sequence such as decimal (1, 2, 3 ), lower roman (i, ii, iii), upper roman (I, II, III), and upper alpha (A, B, C).

Ordered lists also use the list-style-type:

css
  1. ol li {list-style-type: upper-roman;}

As with unordered lists, ordered lists can also be defined for up to three levels:

css
  1. ol li {list-style-type: upper-roman;}
  2. ol li li {list-style-type: upper-alpha;}
  3. ol li li li {list-style-type: decimal;}

Definition Lists

A definition list consists of three HTML parts: the definition list container <dl>, the definition term <dt>, and the definition description <dd>. All three parts can be styled, but only the definition description <dd> can contain block level items like paragraph <p> tags.

If you are unfamiliar with definition lists, consider the advantages of styling your FAQ page. Typically you have a question (the definition term) followed by an answer (the definition description). The following is an example:

css
  1. dt {
  2. font-weight: bold;
  3. letter-spacing: 2px;
  4. color: #bf2c22;
  5. padding: 15px 0;
  6. }
  7. dd {
  8. color: #5454d4;
  9. }

If you are curious about the possibilities of Definition Lists, I recommend you visit the sites below (will open in a new window).

http://www.maxdesign.com.au/presentation/definition/
http://www.cssplay.co.uk/menus/