We can modify the following three properties in a list:
1. `list-style-position`
2. `list-style-type`
3. `list-style-image`

> **Note:** These can also be applied to items of a list separately.

 

# 1. list-style-position
The `list-style-position` indicates the position of the markers (i.e. bullet points or numbers) in the list. Setting it as `outside` will make the markers appear separately from the text; this is a better option as it will align the start of every line with the text:

ul {
    list-style-position: outside;  
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
 <li>The markers in this list</li>
 <li>are positioned</li>
 <li>outside</li>
</ul>

</body>
</html>

codemirror

A list with position set as `inside` will make the list markers part of the text. This will make the text, at the start of every new line, aligned with the marker instead of the actual text:

ul {
    list-style-position: inside;  
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
 <li>The markers in this list</li>
 <li>are positioned</li>
 <li>inside</li>
</ul>

</body>
</html>

# 2. list-style-type
The `list-style-type` property indicates the type of the marker. For unordered lists, it may be set to `circle`, `square`, or `none`. The default value is `disc`:

li.squares {
    list-style-position: inside;  
    list-style-type: square;
}

li.circles {
    list-style-position: inside;  
    list-style-type: circle;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
 <li style="list-style-position: inside">A default disc marker</li>
 <li class="circles">Circle marker</li>
 <li class="squares">Square marker</li>
</ul>

</body>
</html>

For ordered lists, many options are available. Commonly used numbering options include `lower-alpha` and `lower-roman`:

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ol class="alpha">
 <li>Using</li>
 <li>lower alpha</li>
</ol>
<ol class="roman">
 <li>Using</li>
 <li>lower roman</li>
</ol>

</body>
</html>

# 3. list-style-image

An image can be displayed as a marker. Pass the URL of the image in `url()` (if the URL is not working, then `list-style-type` is applied):

[](/api/edpresso/shot/4579448789663744/image/5075682096840704)

ul {
    list-style-image: url('/api/edpresso/shot/4579448789663744/image/5075682096840704');  
}
ol {
    list-style-image: url('wrongurl');
    list-style-type: upper-roman;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
 <li>Using a custom</li>
 <li>image as</li>
 <li>a marker</li>
</ul>

<ol>
 <li>A wrong</li>
 <li>URL uses the</li>
 <li>'list-style-type' property</li>
</ol>

</body>
</html>

# Basic styling

Colouring, padding, margin, and other basic styling can be applied to the list and its items:

ul {
    background: #FF888E;
    padding: 25px;
}
ul li {
    background: #45597E;
    margin: 25px;
    color: #FFFFFF;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
 <li>Applying styling options</li>
 <li>to the list and its items</li>
</ul>

</body>
</html>

How to style a list in CSS

List properties: list-style-position (marker alignment), list-style-type (marker type), and list-style-image (URL-based marker images). Basic styling also can be applied.