CSS lists
Styling Lists and TablesIn this lesson, we will learn how to customize HTML list element using the CSS list-style-type, list-style-image and list-style-position properties.
CSS list Properties
HTML lists are a fundamental part of web content, and CSS provides a range of properties to customize their appearance. The three essential CSS properties that can be used to customize HTML list are:
- list-style-type
- list-style-image
- list-style-position
list-style-type
The list-style-type property allows you to specify the type of marker or counter used for both ordered nd unordered list items.
The most commonly used values of the CSS list-style-type property are:
- circle
- disc
- square
- decimal
- decimal-leading-zero
- lower-alpha
- upper-alpha
- lower-roman
- upper-roman
- none
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS list style type Example</title>
<!-- Internal CSS -->
<style>
.list1 {
list-style-type: circle;
}
.list2 {
list-style-type: disc;
}
.list3 {
list-style-type: square;
}
.list4 {
list-style-type: decimal;
}
.list5 {
list-style-type: decimal-leading-zero;
}
.list6 {
list-style-type: lower-alpha;
}
.list7 {
list-style-type: upper-alpha;
}
.list8 {
list-style-type: lower-roman;
}
.list9 {
list-style-type: upper-roman;
}
.list10 {
list-style-type: none;
}
</style>
</head>
<body>
<p>list-style-type: circle</p>
<ol class="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>list-style-type: disc</p>
<ul class="list2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>list-style-type: square</p>
<ol class="list3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>list-style-type: decimal</p>
<ul class="list4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>list-style-type: decimal-leading-zero</p>
<ol class="list5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>list-style-type: lower-alpha</p>
<ul class="list6">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>list-style-type: upper-alpha</p>
<ol class="list7">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>list-style-type: lower-roman</p>
<ol class="list8">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>list-style-type: upper-roman</p>
<ul class="list9">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>list-style-type: none</p>
<ol class="list10">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>list-style-image
The list-style-image property enables you to use custom images as list markers for both ordered and unordered lists.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS list style image Example</title>
<!-- Internal CSS -->
<style>
ol {
list-style-image: url("bullet.png");
}
</style>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>Click here to download the above bullet image file for practice purposes.
list-style-position
The list-style-position property allows you to control the positioning of the list marker or counter in relation to the list item's content.
The values of CSS list-style-position property are:
- inside
- outside
The default value of list-style-position is outside.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS list style position Example</title>
<!-- Internal CSS -->
<style>
.list1 {
list-style-position: inside;
}
</style>
</head>
<body>
<ol class="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
