CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



list-style-type

List-Style-Type is a CSS property that is used to define the appearance of the list item marker. It is used to specify the type of marker that is used for each list item in an ordered or unordered list. The list-style-type property can be applied to the ul, ol, and li elements.

The list-style-type property has several values that can be used to define the type of marker that is used for each list item. These values include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none

The default value of the list-style-type property is disc for unordered lists and decimal for ordered lists.

Examples

Here are some examples of how the list-style-type property can be used:

Unordered List with Circle Markers

  
    <ul style="list-style-type: circle;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  
  • Item 1
  • Item 2
  • Item 3

Ordered List with Decimal Markers

  
    <ol style="list-style-type: decimal;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  
  1. Item 1
  2. Item 2
  3. Item 3

Ordered List with Upper-Alpha Markers

  
    <ol style="list-style-type: upper-alpha;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  
  1. Item 1
  2. Item 2
  3. Item 3

Unordered List with No Markers

  
    <ul style="list-style-type: none;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  
  • Item 1
  • Item 2
  • Item 3

Conclusion

The list-style-type property is a useful CSS property that can be used to define the appearance of list item markers in ordered and unordered lists. By using the list-style-type property, you can easily customize the appearance of your lists to match the design of your website.

References

Activity