CSS Lists

Previous Page Next Page

Types of HTML Lists

There are three different kinds of lists in HTML:

Unordered lists — A list where each item is marked with bullets.
Ordered lists — A list where each item is marked with numbers.
Definition list — A list where items are accompanied by descriptions.

Explore the tutorial on HTML lists to understand more about them and how to make them.

Styling Lists with CSS

CSS offers several properties for styling and formatting unordered and ordered lists. These CSS properties generally enable you to:

Change the appearance of the marker.
Use an image as the marker instead of a bullet point or number.
Adjust the space between the marker and the text in the list.
Determine if the marker should be inside or outside the box containing the list items.

In the next section, we'll discuss the properties you can use to style HTML lists.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, etc.), while in an unordered list, items are marked with round bullets (•).

However, you can alter this default marker type to any other style, such as Roman numerals, Latin letters, circles, squares, etc., using the list-style-type property.

Let's examine the example below to understand how this property functions:

Example

Try this code »

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

Changing the Position of List Markers

By default, markers of each list item are positioned outside of their display boxes.

Nevertheless, you can also position these markers or bullet points inside the list item's display boxes using the list-style-position property with the value inside. In this scenario, lines will wrap under the marker instead of being indented. Here's an example:

Example

Try this code »

ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}

Let's refer to the illustration below to comprehend how markers or bullets are positioned.

Using Images as List Markers

You can also utilize an image as a list marker using the list-style-image property.

The styling instruction in the provided example sets a transparent PNG image named "arrow.png" as the marker for each item in the unordered list. Let's give it a try and see how it functions:

Example

Try this code »

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

Sometimes, the list-style-image property might not yield the expected result. Alternatively, you can employ the following method for better control over the positioning of image markers.

As a workaround, you can also set image bullets via the background-image CSS property. Initially, set the list to have no bullets. Afterward, specify a background image that doesn't repeat for the list element.

The following example displays the image markers consistently across all browsers:

Example

Try this code »

ul {
list-style-type: none;
}
ul li {
background-image: url("images/bullet.png");
background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}

Setting All List Properties At Once

The list-style property is a shorthand property that allows you to define all three properties list-style-type, list-style-image, and list-style-position of a list in one declaration.

The below style rule sets all the list properties in a single declaration.

Example

Try this code »

ul {
list-style: square inside url("images/bullet.png");
}

Note: When using the list-style shorthand property, the order of the values should be: list-style-type | list-style-position | list-style-image. It doesn't matter if one of the values is missing as long as the rest are in the specified order.

Creating Navigation Menus Using Lists

HTML lists are often used to create horizontal navigation bars or menus that typically appear at the top of a website. However, since list items are block elements, to display them inline, we need to use the CSS display property. Let's try an example to see how it works:

Example

Try this code »

ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}

You'll learn about the CSS display and padding properties in detail in upcoming chapters.

Previous Page Next Page