📋 CSS List Properties
Last Updated: November 2025
Lists are used to display items in sequence, either ordered (<ol>) or unordered (<ul>).
CSS gives you control over how list bullets, numbers, and spacing appear.
🎯 CSS List Properties
| Property | Description | Example |
|---|---|---|
| list-style-type | Defines bullet or numbering style | list-style-type: square; |
| list-style-position | Sets bullet position inside or outside | list-style-position: inside; |
| list-style-image | Uses a custom image as bullet | list-style-image: url('icon.png'); |
| list-style | Shorthand for all list properties | list-style: square inside; |
List Style Types
| Type | Example | Output |
|---|---|---|
| disc | Default for <ul> | • Item |
| circle | list-style-type: circle; | ○ Item |
| square | list-style-type: square; | ■ Item |
| decimal | Default for <ol> | 1. Item |
| upper-roman | list-style-type: upper-roman; | I. Item |
| lower-alpha | list-style-type: lower-alpha; | a. Item |
| none | list-style-type: none; | (no bullet) |
🎨 list-style-position
This property controls where the bullet/number is placed relative to the text.
ul {
list-style-position: inside;
}
Options:
- outside → bullets stay outside the content box (default)
- inside → bullets move inside (align with text)
🗣 Hinglish Tip: Agar text wrap hota hai, inside me bullet bhi text ke saath move karega.
🔗 Shorthand Property: list-style
Combine multiple list properties into one:
ul {
list-style: square inside url("icon.png");
}
💡 Order: list-style-type → list-style-position → list-style-image