Selected Reading
Q&A

CSS - Lists

What are Lists?

Lists are useful as they present the information in a structured and organized manner. Lists improve the readability and comprehension of content on a web page. So, if the content is listed, it is easy to follow.

Lists are commonly used to display items, steps, options, or any other type of related information that should be presented sequentially or in a group.

This chapter will discuss how to control list type, position, style, etc., using CSS. Before that let us understand what are different types of lists in HTML.

HTML Lists

HTML provides mainly two kinds of lists - <ol> (ordered list) and <ul> (unordered list).

Ordered List

Ordered lists are used when the items need to be presented in a specific order marked with numbers or letters. Following is the syntax to create HTML ordered lists:

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Unordered List

Unordered lists are used when the items need to be presented in a specific order marked with simple bullets. Following is the syntax to create HTML ordered lists:

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

CSS Lists - Properties

CSS provides a set of properties that can be applied to any list, which are as follows:

The list-style-type allows you to control the shape or appearance of the list markers (bullet points).
The list-style-position allows to specify the position of the list-item markers.
The list-style-image specifies an image for the marker rather than a bullet point or number.
The list-style serves as shorthand property for to manage the markers.

CSS Lists - Marker Types

CSS allows you to control the shape of the list markers (bullet points). The following example shows how CSS property list-style-type sets different markers for the ordered and unordered lists. The same property can be used for both ordered and unordered lists.

Unordered Lists Example

<html>
<head>
<style>
   ul.a { 
      list-style-type: circle; 
   }
   ul.b { 
      list-style-type: square; 
   }
</style>
</head>
<body>
   <h2>Unordered List Example</h2>
   <ul class="a">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

   <ul class="b">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

Ordered Lists Example

<html>
<head>
<style>
   ol.a { 
      list-style-type: decimal; 
   }
   ol.b { 
      list-style-type: lower-alpha; 
   }
</style>
</head>
<body>
   <h2>Ordered List Example</h2>
   <ol class="a">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

   <ol class="b">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

</body>
</html>

You can check CSS property list-style-type detail to check all the possible marker's types for the lists.

CSS Lists - Image Marker

You might prefer to use an image as an item list marker. The CSS list-style-image property can be used to to specify an image as an item list marker.

You can use your own bullet style. If no image is found, then default bullets are printed. Following is an example to show the usage of list-style-image property.

<html>
<head>
<style>
   ul { 
      list-style-image: url('/images/icon-bullet.png');
   }
</style>
</head>
<body>
   <h2>CSS Lists - Image Marker</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

CSS Lists - Marker Position

The CSS list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one of the following values −

none
inside
outside
inherit

Following is an example to show the usage of list-style-position property.

<html>
<head>
<style>
   ul.a { 
      list-style-position: outside; 
   }
   ul.b { 
      list-style-position: inside; 
   }
</style>
</head>
<body>
   <h2>CSS Lists - Marker Position</h2>
   <ul class="a">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

   <ul class="b">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

</body>
</html>

CSS Lists - Default Marker Position

If the CSS list-style-position property is set to none, then it will remove the markers/bullets. While setting this propert to none, then we need to set margin:0 and padding:0 −

Following is an example to show the usage of list-style-position=none property.

<html>
<head>
<style>
   ul { 
      list-style-position: none; margin:0; padding:0;
   }
</style>
</head>
<body>
   <h2>CSS Lists - Default Marker Position</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

CSS Lists - Shorthand Property

The CSS list-style property allows you to specify all the three list properties into a single expression. −

Following are the values that list-style can hold:

<list-style-type>
<list-style-image>
<list-style-position>

The order of the values passed to the list-style is not fixed and any of the three values can be omitted. If any of the value(s) is missing, it will be filled by the default value for the same. But there has to be minimum one value passed.

Following is an example to show the usage of list-style property.

<html>
<body>
   <h2>CSS Lists - Shorthand Property</h2>
   <h3>Three values passed</h3>
   <ul style = "list-style: url('/images/icon-bullet.png') circle outside;">
      <li>All the three values have been provided</li>
      <li>The item marker is an image, position as outside.</li>
      <li>It is used in cases we do not need to follow a sequence.</li>
   </ul>

   <h3>Two values passed</h3>
   <ul style = "list-style: square inside">
      <li>The item marker is square, with style position as inside and no image.</li>
      <li>It is used in cases we do nit need to follow a sequence.</li>
   </ul>

   <h3>One value passed</h3>
   <ul style = "list-style: disc">
      <li>The item marker is disc, with style position as outside (default) and no image (default - none).</li>
      <li>It is used in cases where we need not follow a sequence.</li>
   </ul>

</body>
</html>

CSS Lists - Controlled Counting

Some time we might want to count differently on an ordered list — e.g., starting from a number other than 1, or counting backwards, or counting in steps of more than 1.

There are following three CSS attributes which helps in controlling the list numbering.

<start> - allows you to start the list counting from a number other than 1.
<reversed> - starts the list counting reverse or down instead of up.
<value> - allows you to set your list items to specific numerical values.

Following is an example to show the usage of all these three attributes.

<html>
<body>
   <h2>CSS Lists - Controlled Counting</h2>
   <h3>start attribute</h3>
   <ol start="4">
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>reverse attribute</h3>
   <ol reversed>
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>value attribute</h3>
   <ol>
      <li value="2">Java.</li>
      <li value="3">HTML.</li>
      <li value="1">CSS.</li>
      <li value="4">React.</li>
   </ol>

</body>
</html>

CSS Lists - Setting Colors

We can make lists look more stylish and colorful using CSS styling as demonstared in the following example. As we see any styling added to the <ul> or <ol> tag will affect the entire list, whereas the addition to the individual <li> tag will affect only the items of the corresponding list.

Following is an example to show the usage of setting up different CSS properties for a list.

<html>
<head>
<style>
   ol { 
      list-style: upper-latin; background: Aquamarine; padding:20px; 
   }
   ol li { 
      background: silver; padding:10px; font-size:20px; margin:10px; 
   }
   ul { 
      list-style: square inside; background: teal; padding:20px; 
   }
   ul li { 
      background: olive; color:white; padding:10px; font-size:20px; margin:10px; 
   }
</style>
</head>
<body>
   <h2>CSS Lists -  Setting Colors</h2>

   <ol>
       <li>Java.</li>
       <li>HTML.</li>
       <li>CSS.</li>
       <li>React.</li>
   </ol>
   <ul>
       <li>Java.</li>
       <li>HTML.</li>
       <li>CSS.</li>
       <li>React.</li>
   </ul>

</body>
</html>

CSS Lists - Related Properties

Property	Description
list-style	A shorthand property for setting all the list properties in one declaration.
list-style-image	Sets an image as a list item's marker.
list-style-position	Sets the position of the list-item markers (bullet points)
list-style-type	Sets the type of list-item marker