How to create bullets using <li> elements ?
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><metacharset="utf-8"><metaname="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><metacharset="utf-8"><metaname="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.
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-alpha
- lower-alpha
- none
- circle
and many more….
Please Login to comment...