logo
CSS Lists
The list properties used to control the presentation of list item markers.

There are three different types of list in HTML:

Unordered lists — A list of items, where every list items are marked with bullets.

Ordered lists — A list of items, where each list items are marked with numbers.

Definition list — A list of items, with a description of each item.

 CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker
List Style :
	
<html>
<head>
<title>List Style</title>
</head>
 
<body>
<ul style="list-style: inside circle;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ol style="list-style: outside upper-roman;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
 
</html> 
Output :
  • Sample List-1
  • Sample List-2
  • Sample List-3
  1. Sample List-1
  2. Sample List-2
  3. Sample List-3
List Style Image
	
<html>
<head>
<title>List Style Image </title>
</head>
   
<body>
<ul>
<li style="list-style-image: url(images/start.png);"> Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ol>
<li style="list-style-image: url(images/start.png);"> Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
   
</html>
Output :
  • Sample List-1
  • Sample List-2
  • Sample List-3
  1. Sample List-1
  2. Sample List-2
  3. Sample List-3
List Style Position
<html>
<head>
<title>List Style Position  </title>
</head>
 
<body>
<ul style="list-style-type:upper-roman; list-style-position:outside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ul style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ol style="list-style-type:upper-alpha;list-style-position:outside;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
 
</html>
Output :
  • Sample List-1
  • Sample List-2
  • Sample List-3
  • Sample List-1
  • Sample List-2
  • Sample List-3
  1. Sample List-1
  2. Sample List-2
  3. Sample List-3
List Style Type
<html>
<head>
<title>List Style Type </title>
</head>
 
<body>
<ul style="list-style-type:circle;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ul style="list-style-type:square;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ul>
 
<ol style="list-style-type:decimal;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
 
<ol style="list-style-type:lower-alpha;">
<li>Sample List-1</li>
<li>Sample List-2</li>
<li>Sample List-3</li>
</ol>
</body>
</html>
Output :
  • Sample List-1
  • Sample List-2
  • Sample List-3
  • Sample List-1
  • Sample List-2
  • Sample List-3
  1. Sample List-1
  2. Sample List-2
  3. Sample List-3
  1. Sample List-1
  2. Sample List-2
  3. Sample List-3