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

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:

• 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:

ul {
    list-style: square outside url("check.png");
}

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.

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

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.

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:

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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

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:

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:

<!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:

<!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.