CSS List

There are two components to a CSS list. The first component is the container element tag that indicates the type of list. There are two possible tags for this:

• <ol>: Ordered list. This means the list is shown in some type of order.
• <ul>: Unordered list. This means the list is not ordered. All items on the list have the same bullet point.

The second component is the list items. They are indicated by the <li> tag. The characteristics of the list items can be modified via the following three CSS properties:

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

These three properties can be combined using the list-style property.

Below we show two examples of a list.

Example 1: Ordered list

CSS Declaration

ol {   list-style-type: upper-roman; }

The following HTML code

<ol>   <li>First item in an ordered list.   <li>Second item in an ordered list. </ol>

renders

1. First item in an ordered list.
2. Second item in an ordered list.

In Example 1, we use <ol> to indicate that this is an ordered list. We then use the list-style-type property to show that upper-case Roman numerals are used to indicate the order.

Example 2: Unordered list

CSS Declaration

ul {   list-style: square inside; }

The following HTML code

<ul>   <li>A longer first item in an ordered list to show list position.   <li>Second item in an unordered list. </ul>

renders

A longer first item to show list position. Second item.

In Example 2, we use <ul> to indicate that this is an unordered list. We then use the list-style property to show that the list header should be a square, and that the second line of the list should line up with the bullet point. This is the combination of list-style-type and list-style-position properties.