CSS List

By | October 3, 2021

In HTML we have two tags <ul> and <ol> to represent text content in list. The list comes very useful when we want to show data in numbered and bullets points. In this tutorial, we will be discussing how to use the CSS properties to manipulate or control the type, position, and style of an HTML list.

Here are some significant list properties which we will be covering in this tutorial.

Properties: Description:
list-style-type It controls the appearance of the list marker.
list-style-position If the list text is too long then it specifies whether to align the second line with the first line or start it with the marker.
list-style-image It set image as a marker instead of numbered or bullets points.
list-style It is a shorthand for all the above properties

CSS list-style-type Property

The list-style-type property determines the appearance of the list bullets and number points. The values vary for an ordered list and unordered list elements.

list-style-type property values for Unordered List:

  • none for no bullets.
  • disc for filled circle bullets.
  • circle for empty circle.
  • square for square bullets.

list-style-type property values for Ordered list:

Value Example
decimal 1,2,3,4,5
decimal-leading-zero 01, 02, 03, 04, 05
lower-alpha a, b, c, d, e
upper-alpha A, B, C, D, E
lower-roman i, ii, iii, iv, v
upper-roman I, II, III, IV, V

Example

<html>
   <head>
   </head>
   <body>

      <ul style = "list-style-type:circle;">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ul>
     
      <ul style = "list-style-type:square;">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ul>
     
      <ol style = "list-style-type:decimal;">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ol>

      <ol style = "list-style-type:lower-alpha;">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ol>
     
      <ol style = "list-style-type:lower-roman;">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ol>
   </body>
</html>

CSS list-style-position Property

The list-style-property deals with the long text, it determines whether to align the second line of a list text with the marker or with the first line itself.

Vamware

list-style-position values

  • none
  • inside
  • outside

Example

<html>
   <head>
   </head>
   <body>

      <ul style = "list-style-position:outside; ">
         <li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
      </ul>

      <ol style = "list-style-position:inside";>
         <li>HTML stands for HyperText Markup Langugae. It is a standared Languge for web-pages. It is not a programming language </li>
      </ol>
   </body>
</html>

CSS list-style-image Property

The list-style-image property specifies an image as a bullet marker. It accepts the image value using the url() function. If the browser fails to load the image then the default marker would be displayed.

Example:

      <ol>
         <li style="list-style-image: url(images/img.png);">  HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ol>

CSS list-style Property

It is a shorthand property for all the other properties we have mentioned above. Using this single property we can set list-style-type, list-style-position and list-style-image using a single statement.

Syntax:

{

 list-style : list-style-type list-style-position list-style-image;

}

Example:

<ol style = "list-style: square inside; url('images/bullet.png')">
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
  </ol> 

Summary

  • HTML has two lists tags <ol> and <ul>
  • <ol> or ordered list use numbering as a marker
  • <ul> list use bullets points as a marker.
  • To change the appearance of the marker we can use the list-style-type property.
  • To change the alignment of the list text we can use the list-style-position property.
  • To set an image as a marker we can use the list-style-image property.

People are also reading:

Author: Vinay

I am a Full Stack Developer with a Bachelor's Degree in Computer Science, who also loves to write technical articles that can help fellow developers.

Leave a Reply

Your email address will not be published. Required fields are marked *