TL;DR – CSS list-style lets you control the list marker position and style.
Contents
CSS List Style: Main Tips
- HTML has two types of lists: ordered and unordered.
- CSS
list-stylecustomizes 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:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Example of unordered lists:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
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:
| 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.
- Dog
- Cat
- Mouse
- Rabbit
- Dog
- Cat
- Mouse
- Rabbit
- Dog
- Cat
- Mouse
- Rabbit
- Dog
- Cat
- Mouse
- Rabbit
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.
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:
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:
Colors
You can make your CSS list style unique by using the background shorthand property with padding and/or margins.
- Dog
- Cat
- Mouse
- Dog
- Cat
- 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-styleshorthand, you can produce shorter and more easy-to-read code.