Demon Tech Roadmap

CSS

CSS Lists

CSS customizes the bullet points and numbers of lists.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS controls the marker style of both ordered and unordered lists. Developers change standard bullets into squares, Roman numerals, or completely custom images. You can also remove the markers entirely for navigation menus.

Example

1/* this styles lists */
2ul {
3  list-style-type: square;
4}
5
6ol {
7  list-style-type: lower-alpha;
8}

Key Points

The `list-style-type` property changes the marker shape.
The `list-style-image` property uses a custom image.
The `list-style-position` controls whether markers sit inside or outside the text block.
Setting `list-style-type: none` removes the markers entirely.

Up Next

Continue your journey with the next topic.

Go to CSS Tables ❯