List Styling in CSS - Change Bullets and Numbering Like a Pro
Lists (ul and ol) are essential in any website: sidebars, steps, links, or FAQ sections.
Styling lists in CSS makes them look clean and professional.
If you are looking for list styling in CSS, how to remove bullets from ul, or how to change numbering in ol, this lesson is for you.
What Are List Properties in CSS?
The main properties for list styling are:
list-style-type: bullet/number style.list-style-image: custom image as a bullet.list-style-position: marker position (inside/outside).list-style: shorthand for all of the above.
Simple definition: List styling in CSS means full control over bullets, numbering, and marker position.
list-style-type in CSS
This property changes the bullet style in ul and the numbering style in ol.
Examples for unordered lists (ul)
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none { list-style-type: none; }
What does this code do? Switches bullet style between circle, square, and none.
Expected result: immediate visual control over list markers.
Common mistake: removing bullets without adding a visual replacement in navigation lists.
Result in the browser:
- Circle item
- Square item
- None item (no marker)
Examples for ordered lists (ol)
ol.roman { list-style-type: upper-roman; }
ol.alpha { list-style-type: lower-alpha; }
ol.decimal-zero { list-style-type: decimal-leading-zero; }
What does this code do? Changes numbering to Roman, alphabetic, or leading-zero decimals.
Expected result: numbering matches the context (steps, chapters, formal items).
Result in the browser:
- Roman numbering
- Alphabetic numbering
- Leading zero numbering
list-style-image in CSS
You can replace the default bullet with a small image.
ul.custom {
list-style-image: url("bullet.png");
}
What does this code do? Uses a custom image as the bullet for each list item.
Expected result: unique visual markers.
Common mistake: using large images that break line height.
list-style: none and add icons with ::before for more control.
list-style-position in CSS
Controls where the marker appears relative to the text:
outside(default): marker outside the text block.inside: marker aligns with the first line of text.
ul.outside { list-style-position: outside; }
ul.inside { list-style-position: inside; }
What does this code do? Changes marker position and affects text alignment, especially in long items.
Expected result: better visual alignment depending on the design.
outside
- A longer list item to show marker position.
inside
- A longer list item to show marker position.
list-style shorthand in CSS
You can combine type + position + image in one line.
ul {
list-style: square inside;
}
What does this code do? Sets marker style and position in one shorthand line.
Common Mistakes with List Styling in CSS
1) Removing markers without replacement: reduces list clarity.
2) Using large list-style-image: breaks line height and spacing.
3) Not resetting default list padding/margin: causes alignment issues.
FAQ - Common Search Questions
How do I remove bullets from ul in CSS?
Use list-style-type: none; or list-style: none;.
How do I change numbering in ol in CSS?
Use list-style-type like upper-roman or lower-alpha.
What is the difference between list-style-type and list-style-image?
The first uses built-in markers, the second uses a custom image.
What is the difference between list-style-position inside and outside?
inside places the marker on the text line, outside keeps it outside the text block.
How do I style lists for a navbar?
Start with list-style: none;, then style li and a appropriately.
ul and switch list-style-type between circle/square/none, then adjust position to inside/outside.