ADVERTISEMENT
ADVERTISEMENT

CSS list-style Property

Learn about the CSS list-style Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 06, 2022

There is no doubt that lists in HTML are of great importance to enrich your website. Lists can be ordered or unordered. Ordered lists are marked with numbers or alphabets whereas unordered lists are marked with bullets. We define a CSS property, namely, list-style to design list item elements like bullets, numbers, or alphabets.

Let's understand this property in detail.

What is list-style Property?

As the name suggests, list-style is a CSS property used to style the elements in the list. It consists of three other properties—list-style-type, list-style-position and list-style-image whose default values are disc, outside and none. These properties are used in customizing list markers.

Syntax:

list-style: list-style-type list-style-position list-style-image |initial |inherit;

Quick overview of the syntax used,

  • list-style-type - It is used to set a particular type of marker in the list such as bullets, disc, numbers, etc.
  • list-style-position - It is used in positioning a marker element in the list.
  • list-style-image - It is used to place an image as a marker in the list.

The examples given below illustrates the use of list-style property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
      <title>Document</title>
   </head>
   <style>
      ul {
      color: blueviolet;
      list-style-type: decimal-leading-zero;
      list-style-position: inside;
      }
   </style>
   
   <body>
      <h2>Welcome to IncludeHelp!</h2>
      <p>Elements of website design-</p>
      <ul>
         <li>Navigation</li>
         <li>Content</li>
         <li>Visual design</li>
      </ul>
   </body>
</html>

Output:

list-style Property Example 1 Output

We have created a list where we have set list-style-type to decimal-leading-zero (01.,02.,03.,…) and list-style-position to inside.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
      <title>Document</title>
   </head>
   <style>
      ul {
      color: blueviolet;
      list-style-image: none;
      }  
   </style>
   
   <body>
      <h2> Welcome to IncludeHelp!</h2>
      <p> Elements of website design-</p>
      <ul>
         <li>Navigation</li>
         <li>Content</li>
         <li>Visual design</li>
      </ul>
   </body>
</html>

Output:

list-style Property Example 2 Output

As you can see in this code, I have used the same list as used in Example1 but the list-style property is changed. We have set the value of list-style-image to none. Therefore, no image is displayed as a marker. By default, it is set to disc.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.