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. 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:
- circle
- decimal, eg :1,2,3, etc
- decimal-leading-zeroes , eg :01,02,03,04,etc
- lower-roman
- upper-roman
- lower-alpha, eg: a,b,c, etc
- upper-alpha, eg: A, B, C, etc
- square
Example: This example describes the CSS List with the various list-style-type where the values are set to square & lower-alpha.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</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:
Image as List Marker: This property specifies the image as a list item marker. The list-style-image property is used to sets an image to be used as the list item marker. Its default value is “none”.
Syntax:
list-style-image: url;
Example: This example describes the CSS List with the various list-style-image where the values are set to url of the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style-image Property </title>
<style>
ul {
list-style-image:
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p> Unordered lists </p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
Output:
List Marker Position: This property specifies the position of the list item marker. The list-style-position property is used to sets the position of the marker relative to a list item. Its default value is “outside”.
There are 2 types of position markers:
- list-style-position: outside; In this, the bullet points will be outside the list item. The start of each line of the list will be aligned vertically.
Syntax:
list-style-position: outside;
Example: This example describes the CSS List with the various list-style-position where the value is set to outside.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one
<br>
In this the bullet points will be
outside the list item.
</li>
<li>two
<br>
The start of each line of the list
will be aligned vertically.
</li>
<li>three</li>
</ul>
</body>
</html>
|
Output:
- list-style-position: inside; In this, the bullet points will be inside the list. The line along with the bullet points will be aligned vertically.
Syntax:
list-style-position: inside;
Example: This example describes the CSS List with the various list-style-position where the value is set to inside.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one
<br>
In this the bullet points will
be inside the list item.
</li>
<li>two
<br>
The line along with the bullet points
will be aligned vertically..
</li>
<li>three</li>
</ul>
</body>
</html>
|
Output:
Shorthand Property: Shorthand Property allows us to set all the list properties in one command. The order of property is a type, position, and image. If any of the properties is missing, the default value is inserted.
Example: This example describes the CSS List using the shorthand property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square inside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</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: This example describes the CSS List where the various styling properties are applied to the element.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square;
background: pink;
padding: 20px;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
|
Output:
Nested List: Lists can also be nested. We have sub-sections for sections, so we need the nesting of lists.
Example: This example describes the CSS List having a list declared inside another list.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>
GeeksforGeeks
</h2>
<ul>
<li>
one
<ul>
<li>sub one</li>
<li>sub two</li>
</ul>
</li>
<li>
two
<ul>
<li>sub one</li>
<li>sub two</li>
</ul>
</li>
<li>
three
<ul>
<li>sub one</li>
<li>sub two</li>
</ul>
</li>
</ul>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
20 Jul, 2023
Like Article
Save Article