CSS Lists
The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized orderly or unorder way, which helps to make a clean webpage. It can be used to arrange the huge with a variety of content as they are flexible and easy to manage. The default style for the list is borderless.
Try It:
- Item 1
- Item 2
- Item 3
Currently Active Property:
list-style-type: decimal;
The list can be categorized into 2 types:
- Unordered List: In unordered lists, the list items are marked with bullets i.e. small black circles by default.
- Ordered List: In ordered lists, the list items are marked with numbers and an alphabet.
We have the following CSS lists properties, which can be used to control the CSS lists:
- list-style-type: This property is used to specify the appearance (such as disc, character, or custom counter style) of the list item marker.
- list-style-image: This property is used to set the images that will be used as the list item marker.
- list-style-position: It specifies the position of the marker box with respect to the principal block box.
- list-style: This property is used to set the list style.
Now, we will learn more about these properties with examples.
List Item Marker
This property specifies the type of item marker i.e. unordered list or ordered. The list-style-type property specifies the appearance of the list item marker (such as a disc, character, or custom counter style) of a list item element. Its default value is a disc.
Syntax:
list-style-type: value;
The following value can be used:
CSS List Style Type | Description |
---|---|
none | No marker or bullet is displayed. |
circle | Default marker for unordered lists, displays a hollow circle. |
decimal | Default marker for ordered lists, displays decimal numbers (1, 2, 3, etc.). |
decimal-leading-zero | Displays decimal numbers with leading zeroes (01, 02, 03, etc.). |
lower-roman | Displays lowercase Roman numerals (i, ii, iii, etc.) for ordered lists. |
upper-roman | Displays uppercase Roman numerals (I, II, III, etc.) for ordered lists. |
lower-alpha | Displays lowercase alphabetical characters (a, b, c, etc.) for ordered lists. |
upper-alpha | Displays uppercase alphabetical characters (A, B, C, etc.) for ordered lists. |
square | Displays filled square markers for unordered lists. |
CSS Lists Examples
Example 1: This example describes the CSS List with the various list-style-type where the values are set to square & lower-alpha.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
w3wiki
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
Output:
Example 2: This example describes the CSS List with the various list-style-image where the values are set to url of the image.
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style-image Property </title>
<style>
ul {
list-style-image:
url("https://contribute.w3wiki.net/wp-content/uploads/listitem-1.png");
}
</style>
</head>
<body>
<h1>
w3wiki
</h1>
<p> Unordered lists </p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Output:
Styling Lists: The list can be formatted in CSS. Different colors, borders, backgrounds, and paddings can be set for the lists.
Example 3: This example describes the CSS List where the various styling properties are applied to the element.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square;
background: pink;
padding: 20px;
}
</style>
</head>
<body>
<h2>
w3wiki
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Contact Us