Generally, the listing of the items or the listing of the contents following a particular manner is specified by the CSS list. There are two ways for organizing the list: ordered and unordered. Using the CSS lists, we can build a clean webpage. CSS list is very flexible and easy to manage and, therefore, can be used to arrange a huge variety of contents. By default, the style of the list is borderless.
Now let us discuss the two types of lists:
- Unordered Lists: For the unordered lists, the contents or the items are marked with bullets (bullets are small black circles), by default.
- Ordered Lists: Items or the contents of the ordered lists are marked with numbers or alphabets.
List Item Marker
This is a property using which the type of the item marker is specified, such as ordered type or unordered type. The appearance of the list item marker of a list item element (such as character, disc, or the custom counter style) is specified by the list style type property, and the default value is set to ‘disc’.
Syntax:
List-style-type:value;
Values that can be used:
- Circle
- Decimal (such as 1, 2 , 3 etc.)
- Decimal leading zeros (such as 01, 02 , 01 etc.)
- Lower roman
- Upper toman
- Lower alpha (such as a,b,c etc.)
- Upper alpha (such as A , B, C etc,)
- Square
Example:
Here, the CSS list with different types of list-style-type is described, and the values are set to square and lower alpha.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
CSS LISTS
</h2>
<p> Unordered Lists</p>
<ul class="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="b">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol class="d">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
Output:
Image as List Marker
This is a special type of property. Using the list-style image property, the images are set to be used as the list marker. The default value of this property is set to ‘none’.
Syntax:
list-style-image: url;
Example:
In this example, the CSS List is described using different types of list-style-image, and we set the default value with the URL of the image.
<!DOCTYPE html>
<html>
<head>
<title>list-style-image Property IN CSS </title>
<style>
ul {
list-style-image: url(
"https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
</head>
<body>
<h1>
CSS LIST
</h1>
<p> Unordered lists applying list-style-image </p>
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
Output:
List Marker Position
The position of the list item marker is specified by this property. To set the position of the marker relative to the item of the list, the property called list-style-position is used. “Outside” is its default value.
There are two types of position markers:
-
list-style-position: outside
In this position marker, the bullets or the markers are placed outside the list-item. The beginning of each line is aligned vertically.
Syntax:
list-style-position: outside;
Example:
In this example, the CSS list is described using different types of list-style-position, and the value is set to outside.
<!DOCTYPE html>
<html>
<head>
<style>
ul.ls {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>
CSS LISTS
</h2>
<p> Unordered lists applying list style position </p>
<ul class="ls">
<li>1
<br>
In this the bullet points will be outside of the list item.</li>
<li>2
<br>
The start of each line of the list will be aligned vertically. </li>
<li>3</li>
</ul>
</body>
</html>
Output:
-
list-style-position: inside
In this position marker, the bullets or the markers are placed inside the list-item. The line along with the bullet point is aligned vertically.
Syntax:
list-style-position: inside;
Example:
Here, the CSS list is described using different types of list-style-position, and the value is set to inside.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>
CSS LIST
</h2>
<p> Unordered lists applying list-style-position </p>
<ul class="a">
<li>1
<br>
In this the bullet points will be inside the list item.</li>
<li>2
<br>
The line along with the bullet points will be aligned vertically.. </li>
<li>3</li>
</ul>
</body>
</html>
Output:
Shorthand Properties
Using this property, all the list properties can be set to one command.
The order of the property is type, position, and image. If any of the values is missing, the default value will be inserted.
Example:
Below is a code example of the use of shorthand properties in CSS List.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square inside;
}
</style>
</head>
<body>
<h2>
CSS LISTS
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Output:
Styling List
Using this property, different colors, backgrounds etc. can be applied to the lists. This property enables us to format the lists in CSS.
Example:
In this code example, we are going to see the application of various style properties to the list elements.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square;
background: rgb(142, 168, 216);
padding: 20px;
}
</style>
</head>
<body>
<h2>
CSS LISTS
</h2>
<p> Unordered lists using styling list property </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Output:
Nested List
Whenever we need sub sections under any section, the nesting of the lists is needed.
Example:
In this code example, we are going to see how in CSS List, the nesting is done by putting one list under another.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>
CSS LISTS
</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:
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
In this article, we have discussed the whole concept of CSS List and how it helps to arrange items and elements.
If you are interested in learning more about CSS and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics.
Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.