? Lists in CSS

CSS lets you style HTML lists (<ul>, <ol>, <li>) to customize their appearance, layout, and behavior.

Types of Lists

• Unordered List (<ul>) — bullet points by default

• Ordered List (<ol>) — numbered by default

• Description List (<dl>) — terms and descriptions

Basic CSS Properties for Lists

Examples

Change Bullet Style

ul {  list-style-type: square; /* circle, disc, none, etc. */}

Remove Bullets or Numbers

ul, ol {  list-style-type: none;  padding-left: 0;  margin-left: 0;}

Use Custom Image Bullets

ul.custom-bullets li {  list-style-image: url('bullet.png');}

Inside vs Outside Bullets

ul {  list-style-position: inside; /* inside or outside */}

Custom Numbering with Counters

ol.custom-counter {  counter-reset: my-counter;  list-style: none;}ol.custom-counter li {  counter-increment: my-counter;  position: relative;  padding-left: 30px;}ol.custom-counter li::before {  content: counter(my-counter) ". ";  position: absolute;  left: 0;  font-weight: bold;}

Styling Nested Lists

ul ul {  list-style-type: circle;  margin-left: 20px;}

Common Uses

• Navigation menus

• Feature lists

• Step-by-step instructions

Want me to create a styled list example, like a vertical navigation menu or a fancy numbered list?