CSS - Styling Lists

Lists are useful as they present the information in a structured and organized manner. Lists improve the readability and comprehension of content on a web page. So, if the content is listed, it is easy to follow.

Lists are commonly used to display items, steps, options, or any other type of related information that should be presented sequentially or in a group.

This chapter will discuss how to control list type, position, style, etc., using CSS. Before that let us understand what are the type of lists in HTML.

Table of Contents

Types of Lists

Following are types of lists used HTML.

• Ordered List (<ol>): Used when the items need to be presented in a specific order. Commonly used for procedures, steps, instructions, or any sequence of information where the order matters.

• Unordered List (<ul>): Used when the order of items doesn’t matter, and you want to present items as a group. Commonly used for lists of features, benefits, options, or any non-sequential information.

• Definition List (<dl>): Used for terms and their corresponding definitions.

List Style Type Property

The CSS list-style-type property is used to change the marker (such as a bullet or number) style for list items in ordered (<ol>) or unordered (<ul>) lists.

Following example shows some types of list styles.

Example

List Style Image Property

The list-style-image property can be used to to specify an image/icon as an item list marker.

You can use your own bullet style. If no image is found, then default bullets are returned.

Example

It is advisable to provide an alternative for an image as list marker, so that in case of image not getting loaded or gets corrupted, the user is having a fallback option.

List Style Position Property

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one of the following values.

• list-style-position: inside If the text goes onto a second line, the text will wrap underneath the marker. It will also have proper indentation.

• list-style-position: outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

• list-style-position: inherit Inherits the property of the parent list in the case of nested lists.

Example

List Style Shorthand Property

The list-style property allows you to specify all the three list properties in a single declaration.

ul{
    list-style: url() | Marker Type |  Marker Position;
}

You can follow any order of the values for the list-style property. If any of the value(s) is missing, it will be filled by the default value for the same. But there has to be minimum one value passed.

Example

Styling Unordered List

Following example shows how to style a unordered list in CSS by adding background colors, hover effect and other CSS properties.

Example

Styling Definition List

The following example shows how to style a definition list in CSS by adding background colors, hover effects, and other CSS properties.

Example

List Style Type Reference

Following table lists possible values that can be used for property list-style-type :