Hello Devs, 

In this tutorial, we will learn CSS List

In CSS we can always change the styles of lists of item HTML In HTML there are two type of list:

  • <ul>: an unorder list marked with bullet
  • <ol>: an order list item that are marked with number or letters.

CSS List style type

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ul>

<ul class="b">
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ol>

<ol class="d">
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ol>

</body>
</html>


Add Image in list marker

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('gry.gif');
}
</style>
</head>
<body>

<ul>
	<li>Red</li>
	<li>Green</li>
	<li>Yellow</li>
</ul>

</body>
</html>


Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ol>
	<li>Red</li>
	<li>Green</li>
	<li>Yellow</li>
</ol>

</body>
</html>


Remove Default Settings

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-type: none;
}

ul {
  list-style-type: none;
}


</style>
</head>
<body>

<h1>List item with no marker</h1>

<ol>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ol>

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ul>

</body>
</html>


List item with color

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  color: green;
  padding: 20px;
}

ul {
  color: orange;
  padding: 20px;
}


</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ol>

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ul>

</body>
</html>
Add background color for list item
<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: palegreen;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}
</style>
</head>
<body>

<h1>Styling Lists With background color Colors:</h1>

<ol>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ol>

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Yellow</li>
</ul>

</body>
</html>


May this example help you.