CSS Lists – Geek Slack

Introduction to CSS

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