It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Master Properties for the CSS List Style: Make Your HTML Lists Unique

Reading time 4 min
Published Sep 15, 2016
Updated Oct 2, 2019

TL;DR – CSS list-style lets you control the list marker position and style.

CSS List Style: Main Tips

  • HTML has two types of lists: ordered and unordered.
  • CSS list-style customizes lists to match web designs, or makes lists more noticeable.

Styling Lists With CSS

Ordered and unordered lists look like this:

Example of ordered lists:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Example of unordered lists:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola
  • ordered lists (<ol>)
  • unordered lists (<ul>)

Setting the list style with CSS is useful as you will be able to organize and style information.

  • The information is easier to follow;
  • The information is easier to remember;
  • Readers prefer short sentences over blocks of text;
  • It makes your text more dynamic.

Note: ordered lists have numbers or letters while unordered lists have bullet markings.

Properties for CSS list-style give you full control over:

  • The appearance and position of the markers.
  • The layout of lists.
  • Background colors.
  • Additionally, you can use images as your markers or remove them altogether.

Using list-style Shorthand

The list-style shorthand sets three individual CSS lists styling properties in one declaration:

Example
ul {
    list-style: square outside url("check.png");
}
Property Description
list-style Shorthand property which allows us to determine all individual properties in one declaration
list-style-image Defines the list item marker as an image
list-style-position Defines the list-item markers position
list-style-type Defines the style of your marker

Note: if you skip properties in the declaration, they will have their initial values.

Item Markers

The CSS list-style-type property determines the way markers on ordered and unordered lists look. Their values are indicated using keywords (disc, circle, square, decimal, etc.).

Note: the color of markers is the same as the element it is set.

  1. Dog
  2. Cat
  3. Mouse
  4. Rabbit
  • Dog
  • Cat
  • Mouse
  • Rabbit
  1. Dog
  2. Cat
  3. Mouse
  4. Rabbit
  1. Dog
  2. Cat
  3. Mouse
  4. Rabbit

This example sets the CSS list-style-type property with four values:

Example
ul.ba {
    list-style-type: square;
}

ul.aa {
    list-style-type: circle;
}

ol.da {
    list-style-type: lower-alpha;
}

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

The list-style-type property accepts the following values as well:

  • custom-ident — sets an identifier equal to the value of @counter-style.
  • symbols() — sets an anonymous style of lists.
  • string — the string will be used as the marker.
  • none — there is no marker.

Tip: there are many other predefined markers that you can apply. For instance, there are markers for traditional Hebrew, Georgian, Chinese numbering, etc.

Making CSS Remove Bullets

It is possible to remove bullets from ul lists by setting the CSS list-style-type property to none. As a result, the bullets disappear from the list.

Example
ul.ba {
    list-style-type: none;
}

Note: to get rid of the automatic indentation, you can also set margin and padding to 0.

Image Marker

Custom markers with CSS for list styles include images. Usually, the list-style-image property has an URL address of an image as the value.

The following example has a unique image set as the marker of an unordered list:

Example
ul {
    list-style-image: url('check.png');
}

Marker Position

The list-style-position property sets the position of the marker. The property accepts two values:

  • inside — the marker appears inside the items of lists.
  • outside — the marker is outside the items of lists.

This example positions the markers of an unordered list outside:

Example
ul {
    list-style-position: outside;
}

Colors

You can make your CSS list style unique by using the background shorthand property with padding and/or margins.

  • Dog
  • Cat
  • Mouse
  1. Dog
  2. Cat
  3. Mouse

Specifications in the <ul> or <ol> elements affect the whole list.
Therefore, you can separate backgrounds of the whole list and individual points.

This example assigns different styles of color and layout to two lists:

Example
ol {
    background: #5f56d5;
    padding: 15px 15px 15px 5px;
}

ul {
    background: #5f56d5;
    padding: 15px 15px 15px 5px;
}

ol li {
    background: #ea3a53;
    padding: 5px;
    margin-left: 30px;
}

ul li {
    background: #ea3a53;
    padding-left: 5px;
    margin: 5px 5px 5px 30px;
}

Borders

You can enhance the list style with the CSS border shorthand or a longhand of each side.

  • Rose
  • Tulip
  • Daisy

Tip: borders help to separate points. Borders can be in a box shape and contain all four walls or on, two or three walls.

This example adds a purple border on the left side of the list:

Example
<!DOCTYPE html>
<html>
<head>
<style>

ul {
    border-left: 6px solid #5e37bc;
    background-color: #b495c9;
    color: white;
   list-style-type: circle;
   padding: 11px 21px;
}

</style>
</head>
<body>
<ul>
  <li>Dad</li>
  <li>Mom</li>
  <li>Sister</li>
</ul>
</body>
</html>

This example separates each point of the list:

Example
<!DOCTYPE html>
<html>
<head>
<style>

ul {
    list-style-type: none;
    padding: 0;
    border: 2px solid #c141f4;
}

ul li {
    padding: 10px 18px;
    border-bottom: 2px solid #417ff4;
}

ul li:last-child {
    border-bottom: none;
}

</style>
</head>
<body>
<p>Bordered list with full width:</p>
<ul>
  <li>Mom</li>
  <li>Dad</li>
  <li>Sister</li>
</ul>
</body>
</html>

CSS List Style: Useful Tips

  • CSS3 introduced many predefined markers, but the majority of browsers do not support them.
  • By using the CSS list-style shorthand, you can produce shorter and more easy-to-read code.