How to create bullets using <li> elements ? - GeeksforGeeks

08 Jun, 2020
We know that, whether it may be an ordered list or unordered list they come along with a numbering.
It may be:
Bullets
Squares
Decimal
Roman etc.
There are numerous options that we can use, but the question comes what property does this depend upon?
In CSS, for tags like <ol> and <ul>, there is a property called list-style-type.
Approach: The list-style-type property determines whether bullets, squares, or decimal etc come with li elements. To change or understand how it impacts the HTML is to use CSS targeting the selector <ul> or <ol>.
Syntax: CSS targeting <li> elements:
ol {
    list-style-type: decimal
}
ul {
    list-style-type: disc
}    

Let’s understand with examples:
The default list-style-type for ordered list is Decimal and unordered is Disc. As evident from the above code.Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=          "width=device-width">  <title>Lists</title></head><body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>Output:With the default styling, <ol> tag comes with Decimal and <ul> comes with Disc/Bullets as defined in CSS above.From here we understand how bullets come to <li> elements, but we can also change them to something else as well.Now we know from where bullets come in list elements, we can change it accordingly. Let’s set it to Roman Numerals in Ordered List and Square in Unordered List.Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=        "width=device-width">  <title>Lists</title>    <style>    ol{      list-style-type: upper-roman    }    ul{      list-style-type: square    }</style></head>  <body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>Output:Here we can clearly see bullets/disc are replaced with square and decimals with Roman Numerals.
The default list-style-type for ordered list is Decimal and unordered is Disc. As evident from the above code.Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=          "width=device-width">  <title>Lists</title></head><body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>Output:With the default styling, <ol> tag comes with Decimal and <ul> comes with Disc/Bullets as defined in CSS above.From here we understand how bullets come to <li> elements, but we can also change them to something else as well.
Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=          "width=device-width">  <title>Lists</title></head><body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=          "width=device-width">  <title>Lists</title></head><body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>
Output:With the default styling, <ol> tag comes with Decimal and <ul> comes with Disc/Bullets as defined in CSS above.From here we understand how bullets come to <li> elements, but we can also change them to something else as well.
With the default styling, <ol> tag comes with Decimal and <ul> comes with Disc/Bullets as defined in CSS above.
From here we understand how bullets come to <li> elements, but we can also change them to something else as well.
Now we know from where bullets come in list elements, we can change it accordingly. Let’s set it to Roman Numerals in Ordered List and Square in Unordered List.Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=        "width=device-width">  <title>Lists</title>    <style>    ol{      list-style-type: upper-roman    }    ul{      list-style-type: square    }</style></head>  <body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>Output:Here we can clearly see bullets/disc are replaced with square and decimals with Roman Numerals.
Example:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=        "width=device-width">  <title>Lists</title>    <style>    ol{      list-style-type: upper-roman    }    ul{      list-style-type: square    }</style></head>  <body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content=        "width=device-width">  <title>Lists</title>    <style>    ol{      list-style-type: upper-roman    }    ul{      list-style-type: square    }</style></head>  <body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul></body></html>
Output:Here we can clearly see bullets/disc are replaced with square and decimals with Roman Numerals.
Here we can clearly see bullets/disc are replaced with square and decimals with Roman Numerals.
Complete Code:
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content         ="width=device-width">  <title>Lists</title></head>  <body>  <p>Ordered List:</p>  <ol>      <li>Eggs</li>      <li>Bacon</li>      <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul>      <li>Coriander</li>      <li>Basil</li>      <li>Onion</li>  </ul>  <p>Ordered List:</p>  <ol style="list-style-type:            upper-roman;">    <li>Eggs</li>    <li>Bacon</li>    <li>Leeks</li>  </ol>  <p>Unordered List:</p>  <ul style="list-style-type:                  square;">    <li>Coriander</li>    <li>Basil</li>    <li>Onion</li>  </ul></body></html>                    
Output:
Using both Default and Custom Inline CSS
Similarly, we can change the list-style-type to numerous types:
upper-alphalower-alphanonecircleand many more....
upper-alpha
lower-alpha
none
circleand many more....
and many more....
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?