- Home
- /
- CSS List Styles
CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
- Home
- /
- CSS List Styles
CSS List Styles
In web design, lists organize content neatly and clearly. CSS lets you style both unordered (bulleted) and ordered (numbered) lists to improve readability and match your website’s look.
Unordered List Styling
Unordered lists use bullets by default. You can change the bullet style using list-style-type.
Syntax:
ul {
list-style-type: value;
}
Available Values:
disc
: Default filled circlecircle
: ○ Hollow circlesquare
: ■ Filled squarenone
: No bullet
Example:
- Learn With Arshyan
- Course Modules
- Enroll Now
- Weekly Tests
- Live Sessions
- Certificates
- Hidden Style
- No Bullet Here
Ordered List Styling
You can also change how numbers or letters appear in ordered lists.
Syntax:
ol {
list-style-type: value;
}
Common Values:
decimal
: 1,2,3decimal-leading-zero
: 01,02,03lower-roman
: i, ii, iiiupper-roman
: I, II, IIIlower-alpha
: a, b, cupper-alpha
: A, B, C
Example:
- Introduction
- Box Model
- Setup
- Typography
- Selectors
- Specificity
- Project Plan
- Final Review
List Style Position
This property controls where the bullet/number appears – inside the element or outside (indented).
Syntax:
ul {
list-style-position: inside | outside;
}
Example:
- Inside marker stays with text
- Good for compact layouts
- Outside marker is indented
- Looks more traditional
Removing Default List Style
You can remove all bullets or numbers using:
ul, ol {
list-style: none;
}
Example:
- Menu Item 1
- Menu Item 2
Custom List Marker
You can use : :marker
or list-style-type
with a Unicode/emoji character (with limitations).
Example:
- Lesson Complete
- Task Submitted