How to style lists using CSS

How to style lists using CSS | CSS Styling Lists | The list-style property in CSS

by

To show some data in web pages consists of showing a list altogether. We can override the default style for the list and put our style manually using CSS. Look at the links available here and learn how to style lists using CSS. Also, you may get an idea about the CSS Properties for styling lists from this tutorial.

Basic Styling in CSS

Colouring, padding, margin, and other basic styling can be used to the list and its items:

ul {
    background: #FF888E;
    padding: 25px;
}
ul li {
    background: #45597E;
    margin: 25px;
    color: #FFFFFF;
}

Output:

basic css styling example result

Do Refer:

How to style a list in CSS?

By following the three CSS properties shown here helps to modify the list:

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

1. list-style-type Property

list-style-type is used to set a predefined marker to be used by the list:

li {
  list-style-type: square;
}

We can also use the disc, circle, or none in place of the square.

2. list-style-image Property

list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:

li {
  list-style-image: url(list-image.png);
}

3. list-style-position Property

list-style-position lets us add the marker outside or inside of the list content, in the flow of the page rather than outside of it.

li {
  list-style-position: inside;
}

CSS list-style Property

The list-style lets you specify all the list properties into a single expression. These properties can perform in any order. We can use the shorthand property i.e list-style to specify all the properties altogether:

li {
  list-style: url(list-image.png) inside;
}

Check out the following example:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Result:

list-style property example output

CSS marker-offset Property

The marker-offset property enables you to define the distance between the marker and the text concerning that marker. Regrettably, this property is not maintained in IE 6 or Netscape 7. Its value must be a length as shown in the below example −

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

It will result like below:

css styling lists example output