CSS List Styles
Lists are one of the most common elements in web design. They help present information in a structured way and improve readability. With CSS, you can easily style both unordered lists (bulleted) and ordered lists (numbered) to match the design of your website.
Following are the various techniques for styling HTML lists.
Unordered List Styling
To style unordered lists (bulleted lists), we can change the list item marker.
Syntax:
ul {
list-style-type: value;
}
The value can be:
- disc: (default) - Filled circle marker
- circle: hollow circle marker
- square: a filled square marker
- none: No marker (remove bullets)
Example:
<head>
<style>
.ul1 {
list-style-type: disc;
}
.ul2 {
list-style-type: circle;
}
.ul3 {
list-style-type: square;
}
.ul4 {
list-style-type: none;
}
</style>
</head>
<body>
<ul class="ul1">
<li>Hello world</li>
<li>This is ul1</li>
</ul>
<ul class="ul2">
<li>Hello world</li>
<li>This is ul2</li>
</ul>
<ul class="ul3">
<li>Hello world</li>
<li>This is ul3</li>
</ul>
<ul class="ul4">
<li>Hello world</li>
<li>This is ul4</li>
</ul>
</body>
</html>
Ordered Lists Styling
Ordered lists use numbers by default, but you can change their style with list-style-type
.
Syntax:
ol {
list-style-type: value;
}
The value can be any of the following:
- decimal: (default) - Decimal numbers (1, 2, 3, etc.)
- decimal-leading-zero: Decimal numbers with leading zeros (01, 02, 03, etc.)
- lower-roman: lowercase Roman numbers (i, ii, iii,...)
- upper-roman: uppercase Roman numbers (I, II, III,...)
- lower-alpha: lowercase alphabetical letters (a, b, c, etc.)
- upper-alpha: uppercase alphabetical letters (A, B, C, etc.)
Example:
<html lang="en">
<head>
<title>CWH</title>
<style>
.ul1 {
list-style-type: decimal;
}
.ul2 {
list-style-type: decimal-leading-zero;
}
.ul3 {
list-style-type: lower-roman;
}
.ul4 {
list-style-type: upper-roman;
}
.ul5 {
list-style-type: lower-alpha;
}
.ul6 {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ul class="ul1">
<li>CodeWithHarry</li>
<li>This is style decimal</li>
</ul>
<ul class="ul2">
<li>CodeWithHarry</li>
<li>This is style list-style-type</li>
</ul>
<ul class="ul3">
<li>CodeWithHarry</li>
<li>This is style lower-roman</li>
</ul>
<ul class="ul4">
<li>CodeWithHarry</li>
<li>This is style upper-roman</li>
</ul>
<ul class="ul5">
<li>CodeWithHarry</li>
<li>This is lower-alpha</li>
</ul>
<ul class="ul6">
<li>CodeWithHarry</li>
<li>This is upper-alpha</li>
</ul>
</body>
</html>
List-Style Position
The list-style-position
property determines where the list markers (bullets or numbers) are placed in relation to the content.
It has two values:
- inside: (default) List markers are inside the content's box. This is the default behavior.
- outside: List markers are outside the content's box, typically to the left of the content, creating a hanging indent effect.
Example:
<html lang="en">
<head>
<style>
.ul1 {
list-style-position: inside;
}
.ul2 {
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="ul1">
<li>CodeWithHarry</li>
<li>list style position : inside</li>
</ul>
<ul class="ul2">
<li>CodeWithHarry</li>
<li>list style position : outside</li>
</ul>
</body>
</html>
Removing Default List Styles
To remove default list styles (bullets or numbers), set the list-style
property to 'none'.
Example:
<html lang="en">
<head>
<style>
.ul1 {
list-style: circle;
}
.ul2 {
list-style: none;
}
</style>
</head>
<body>
<ul class="ul1">
<li>CodeWithHarry</li>
<li>Developer</li>
</ul>
<ul class="ul2">
<li>CodeWithHarry</li>
<li>list style :none</li>
</ul>
</body>
</html>

Custom List Style
To set a custom list style, set the 'list-style-type' to your new required custom style.
Example:
<html lang="en">
<head>
<style>
.ul1 {
list-style-type: "😍";
}
</style>
</head>
<body>
<ul class="ul1">
<li>CodeWithHarry</li>
<li>Developer</li>
</ul>
</body>
</html>