CSS Lists

There are various CSS properties that can be used to control lists. Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, whereas in unordered lists, the list items are marked using bullets.

We can style the lists using CSS. CSS list properties allow us to:

Set the distance between the text and the marker in the list.
Specify an image for the marker instead of using the number or bullet point.
Control the marker appearance and shape.
Place the marker outside or inside the box that contains the list items.
Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

list-style-type: This property is responsible for controlling the appearance and shape of the marker.
list-style-image: It sets an image for the marker instead of the number or a bullet point.
list-style-position: It specifies the position of the marker.
list-style: It is the shorthand property of the above properties.
marker-offset: It is used to specify the distance between the text and the marker. It is unsupported in IE6 or Netscape 7.

Let’s understand the above properties in detail, along with an example of each.

The list-style-type property

It allows us to change the default list type of marker to any other type such as square, circle, roman numerals, Latin letters, and many more. By default, the ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•).

If we set its value to none, it will remove the markers/bullets.

Note: The list also includes the default padding and margin. To remove this, we need to add padding:0 and margin:0 to <ol> and <ul>.

The illustration of using this property is given as follows:

Example

  <!DOCTYPE html>    <html>      <head>      <title>CSS Lists</title>        <style>     .num{      list-style-type:decimal;       }    .alpha{        list-style-type:lower-alpha;     }    .roman{        list-style-type:lower-roman;     }    .circle{      list-style-type:circle;     }    .square{      list-style-type:square;     }    .disc{      list-style-type:disc;     }        </style>      </head>      <body>         <h1>            Welcome to the  tutoraspire.com         </h1>           <h2>            Ordered Lists         </h2>         <ol class=”num”>            <li>one</li>            <li>two</li>            <li>three</li>         </ol>         <ol class=”alpha”>            <li>one</li>            <li>two</li>            <li>three</li>         </ol>           <ol class=”roman”>            <li>one</li>            <li>two</li>            <li>three</li>         </ol>         <h2>            Unordered lists         </h2>         <ul class=”disc”>            <li>one</li>            <li>two</li>            <li>three</li>         </ul>         <ul class=”circle”>            <li>one</li>            <li>two</li>            <li>three</li>         </ul>     <ul class=”square”>            <li>one</li>            <li>two</li>            <li>three</li>         </ul>        </body>   </html>  

Test it Now

The list-style-position property

It represents whether the appearing of the marker is inside or outside of the box containing the bullet points. It includes two values.

inside: It means that the bullet points will be in the list item. In this, if the text goes on the second line, then the text will be wrap under the marker.

outside: It represents that the bullet points will be outside the list item. It is the default value.

The following example explains it more clearly.

Example

  <!DOCTYPE html>    <html>      <head>      <title>CSS Lists</title>        <style>     .num{      list-style-type:decimal;      list-style-position:inside;     }    .roman{     list-style-type:lower-roman;      list-style-position:outside;     }    .circle{      list-style-type:circle;   list-style-position:inside;    }    .square{      list-style-type:square;     }    .disc{      list-style-type:disc;   list-style-position:inside;    }        </style>      </head>      <body>         <h1>            Welcome to the  tutoraspire.com         </h1>           <h2>            Ordered Lists         </h2>         <ol class=”num”>            <li>INSIDE</li>            <li>two</li>            <li>three</li>         </ol>     <ol class=”roman”>            <li>OUTSIDE</li>            <li>two</li>            <li>three</li>         </ol>         <h2>            Unordered lists         </h2>         <ul class=”disc”>            <li>INSIDE</li>            <li>two</li>            <li>three</li>         </ul>         <ul class=”circle”>            <li>INSIDE</li>            <li>two</li>            <li>three</li>         </ul>     <ul class=”square”>            <li>DEFAULT</li>            <li>two</li>            <li>three</li>         </ul>        </body>   </html>  

Test it Now

The list-style-image property

It specifies an image as the marker. Using this property, we can set the image bullets. Its syntax is similar to the background-image property. If it does not find the corresponding image, the default bullets will be used.

Example

  <!DOCTYPE html>    <html>      <head>      <title>CSS Lists</title>        <style>     .order{      list-style-image: url(img.png);        }    .unorder{      list-style-image: url(img.png);        }          </style>      </head>      <body>         <h1>            Welcome to the  tutoraspire.com         </h1>           <h2>            Ordered Lists         </h2>         <ol class=”order”>            <li>one</li>            <li>two</li>            <li>three</li>         </ol>         <h2>            Unordered lists         </h2>         <ul class=”unorder”>            <li>one</li>            <li>two</li>            <li>three</li>         </ul>        </body>   </html>  

Test it Now

The list-style property

It is the shorthand property that is used to set all list properties in one expression. The order of the values of this property is type, position, and image. But if any property value is missing, then the default value will be inserted.

Example

  <!DOCTYPE html>    <html>      <head>      <title>CSS Lists</title>        <style>     .order{      list-style: lower-alpha inside url(img.png);        }    .unorder{      list-style: disc outside;        }          </style>      </head>      <body>         <h1>            Welcome to the  tutoraspire.com         </h1>           <h2>            Ordered Lists         </h2>         <ol class=”order”>            <li>one</li>            <li>two</li>            <li>three</li>         </ol>         <h2>            Unordered lists         </h2>         <ul class=”unorder”>            <li>one</li>            <li>two</li>            <li>three</li>         </ul>        </body>   </html>  

Test it Now

Styling Lists with colors

To make the lists more attractive and interesting, we can style lists with colors. The addition of anything to the <ul> or <ol> tag will affect the entire list, whereas the addition to the individual <li> tag will affect the items of the corresponding list.

Example

  <!DOCTYPE html>    <html>      <head>      <title>CSS Lists</title>        <style>     .order{      list-style: upper-alpha;  background: pink;  padding:20px;    }    .order li{    background: lightblue;    padding:10px;    font-size:20px;    margin:10px;    }    .unorder{      list-style: square inside;   background: cyan;  padding:20px;    }    .unorder li{    background: green;    color:white;    padding:10px;    font-size:20px;    margin:10px;    }          </style>      </head>      <body>         <h1>            Welcome to the  tutoraspire.com         </h1>           <h2>            Ordered Lists         </h2>         <ol class=”order”>            <li>ONE</li>            <li>TWO</li>            <li>THREE</li>         </ol>         <h2>            Unordered lists         </h2>         <ul class=”unorder”>            <li>ONE</li>            <li>TWO</li>            <li>THREE</li>         </ul>        </body>   </html>  

Test it Now

Next TopicCSS nth-child selector

CSS Lists

CSS Lists

The list-style-type property

Note: The list also includes the default padding and margin. To remove this, we need to add padding:0 and margin:0 to <ol> and <ul>.

Example

The list-style-position property

Example

The list-style-image property

Example

The list-style property

Example

Styling Lists with colors

Example

Sum of Digits Program in C++

CSS minify

You may also like