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.
-
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.
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:
Similarly, we can change the list-style-type to numerous types:
- upper-alpha
- lower-alpha
- none
- circle
and many more….