CSS Styling HTML Lists

We often see webpages with navigation menus, providing links to other pages in a dropdown fashion, or as a horizontal menu (See the Studytonight Website Navbar above). These menus are structurally lists but are styled to look differently.

Lists are also used to represent related data information, which again can be styled to look better.

In HTML, there are two types of lists:

1. Ordered Lists **<ol>**: Items marked with numbers or letters.
2. Unordered Lists **<ul>**: Items marked with bullets.

With CSS, you can use your own images as bullets in a list. The CSS list properties allows you to:

• Set different list item markers for ordered lists.
• Set different list item markers for unordered lists.
• Set an image as the list item marker.

The type of list item marker can be set by using the list-style-type property.

Example:

ul { 
    list-style-type: circle; 
}

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

The following keywords work with the list-style-type property:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none - removes the bullets

> NOTE: Non-keyword values have been included in CSS3, but there is hardly any support for them.

The list-style-type property applies to all lists, and to any element that is set to display: list-item. The color of the list marker will be whatever the color of the element is (set via the color property).

Positioning the List Item Markers

Next, you need to know how you can position your list. The list-style-position property lets you set the position of your list on your webpage. It accepts two values, inside & outside. The default value is outside.

Example:

ul{ 
    list-style-position: inside; 
}

Image as the List Item Marker

As we mentioned earlier, it is possible to use an image as a bullet marker on your webpage. This can be done by using the list-style-image property. You can either set it to none, or you can provide a url to some image.

ul{ 
    list-style-image: url('images/bullet.png');
}