CSS List

Even though lists are one of the most powerful features of HTML, they are massively overlooked.

We all know their basic function, i.e. organizing information into a list form.

However, most of us forget that they also allow us to create a variety of other effects, such as navigation bars and side menus.

With CSS, we can achieve a next level of control over our HTML lists, allowing us to create customized lists.

CSS List Style

According to default settings, list items are displayed with numbers in ordered lists, bullet points in unordered lists, and no markers in definition lists.

That said, the list-style-type property allows us to choose from several different markers.

For instance, if someone wishes to specify square markers for unordered lists, they would use the following code in their CSS:

ul li {
list-style-type: square;
}

The following list shows the various marker options in CSS.

It includes the appearance of a given marker and the CSS value needed to produce it:

Ordered List Markers

  1. decimal
  2. decimal with a leading zero
  3. lower-alpha
  4. upper-alpha
  5. lower-roman
  6. upper-roman

Unordered List Markers

  • disc
  • square
  • circle
  • none

Pretty much all browsers support the markers mentioned above, so it is recommended to stick within these for your lists.

There are other marker types as well which you can explore and experiment with, however all browsers may not support them.

 

List Markers With Images

Apart from the list markers that we outlined above, we can also images to create personalized markers.

Specifying an image as a list marker is easy; you just need to use the list-style-image property, followed by the URL of the desired image.

In case your desired image is unavailable, it is a great idea to specify a list-style-type as a backup.

This is what you do:

li {
list-style-image: URL(/uploads/marker.png);
list-style-type: circle;
}

Below, we have given an example of a list marker image.

In the example, we have used an image of a computer screen with an html braket as the list marker:

  • Here’s a list item
  • Another list item
  • A final list item

 

List Position

You can use the list-style-position to indent the text and or the marker.

You use:

ul {
list-style-position: inside;
}

With either the value of:

inside: will indent the text and the marker
outside: will only indent the text

Alternatively, if you’re looking to offset the marker, you can use:

ul {
marker-offset: 8px;
}

 

Horizontal List

We are familiar with the vertical type of lists as seen above i.e. listing each item below the last.

But there is another way to display the list and that is horizontal.

We display each item in the list next to another one.

Showing the items horizontally in the list is not the preferred or conventional way to display but if you want to create a horizontal navigation bar for example, that might be a good use case.

To do so, we need to add an extra property to our list item tags to display the inline HTML list:

li {
display: inline;
}

Here’s an example, we’ve placed the style in the page itself between the style tags, however we would suggest moving the style to your CSS stylesheet.

Code:


<!DOCTYPE html>

<html>

<head>

<style>
li.horizontal {
	display: inline;
        }
</style>

<link rel="stylesheet" href="/file/stylesheet.css">

</head>

<body>

<ul>
	<li class="horizontal">HTML</li>
	<li class="horizontal">CSS</li>
	<li class="horizontal">Java</li>
	<li class="horizontal">C++1</li>
</ul>

</body>

</html>

Output:

  • HMTL
  • CSS
  • Java
  • C++