About Lesson
CSS Lists
CSS provides various properties to style and format lists on web pages. In this chapter, we’ll explore some of the most commonly used CSS properties for styling lists.
Unordered Lists
The list-style-type property is used to specify the type of list item marker for unordered lists.
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ul.none {
list-style-type: none;
}- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Ordered Lists
The list-style-type property is also used to specify the type of list item marker for ordered lists.
ol.decimal {
list-style-type: decimal;
}
ol.lower-alpha {
list-style-type: lower-alpha;
}
ol.upper-roman {
list-style-type: upper-roman;
}- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item I
- Item II
- Item III
List Item Marker Position
The list-style-position property is used to specify the position of the list item markers.
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Custom List Item Markers
The list-style-image property is used to specify an image as the list item marker.
ul.custom-marker {
list-style-image: url('https://example.com/marker.png');
}- Item 1
- Item 2
- Item 3
Styling Nested Lists
You can also style nested lists differently using CSS.
ul.nested ul {
list-style-type: square;
margin-left: 20px;
}- Item 1
- Sub-item 1
- Sub-item 2
- Item 2
- Item 3
Join the conversation