How to style lists in CSS (cascading style sheet)?

What are lists in CSS?

Lists are the arrangement of text, line, paragraph in a particular order. Lists play an important role in displaying data either in numbered or in bullets. Lists help to show data in categorised way. Let us see “How to style lists in CSS (cascading style sheet)“?

There are following CSS properties for lists.

  1. The list-style-type.
  2. The list-style-position.
  3. The list-style-image.
  4. The list-style.

The list-style-type property in CSS

This property allows you to control the shape or style of bullets in an unordered lists and style of numbering in an ordered lists.

There are following values of an unordered list:

  1. none: No value
  2. disc: The style of bullet is disc. It is the default value.
  3. circle: The style of bullet is circle.
  4. square: The style of bullet is square.

The following are the list style properties for an ordered list:

  1. lower-alpha: It styles as lowercase alphanumeric character.
  2. upper-alpha: It styles as uppercase alphanumeric character.
  3. lower-roman: It styles as lowercase roman numerals.
  4. upper-roman: It styles as uppercase roman numerals.
  5. decimal: It styles as numbers.
  6. decimal-leading-zero: It styles with 0 before number.

Let us now write a code for list style properties:

<!doctype html>
   <head>
	<style>
	#disc{
	    list-style-type:disc;
	     }
	#disc{
	    list-style-type:circle;
	     }
	#square{
	    list-style-type:square;
	     }
	#lower-alpha{
	    list-style-type:lower-alpha;
	     }
	#upper-alpha{
	    list-style-type:upper-alpha;
	     }
	#lower-roman{
	    list-style-type:lower-roman;
	     }
	#upper-roman{
	    list-style-type:upper-roman;
	     }
	#decimal{
	    list-style-type:decimal;
	     }
	#decimal-leading-zero{
	    list-style-type:decimal-leading-zero;
	     }
	</style>	
   </head>  
   <body>
	<p><b>Unordered lists starts here</b></p>
	<ul id="disc">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      <ul id="circle">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      <ul id="square">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
	<p><b>Ordered lists starts here</b></p>
	<ol id="lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      <ol id="upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
	<ol id="lower-roman">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
	<ol id="upper-roman">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      <ol id="decimal">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      <ol id="decimal-leading-zero">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>   
   </body>
</html> 
The list-style-type property in CSS, www.programmingtutorial.in

The list-style-position property in CSS

The list-style-position specifies the position of the list items. This can be inside or outside. list-position-outside means that the bullet points will be outside the list items. The start of each line will be of a list item will be aligned outside.

“list-style-position: inside;” means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 
The list-style-position property in CSS, www.programmingtutorial.in

The list-style-image property in CSS

The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property. The value of the property is followed by the URL in brackets.

<html>
   <head>
   </head>
   <body>
      <ul>
   <li style = "list-style-image:url(image path);">Chemistry</li>
         <li>Hindi</li>
         <li>Physics</li>
      </ul>
      
      <ol>
   <li style = "list-style-image:url(image path);">Chemistry</li>
         <li>Hindi</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

The list-style property in CSS

When there is need to style properties in single line, you can use list style property.

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style: inside square;">
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Banana</li>
         <li>Apple</li>
         <li>Grapes</li>
      </ol>
   </body>
</html> 
The list-style property in CSS