Types of Bullet Symbols in HTML 5 Unordered list

Types of Bullet Symbols in HTML 5 Unordered List:

In HTML and CSS, bullets introduce items of an unordered list.

We can alter the symbol that we should like to use so as to introduce the items of an unordered list by assigning values to the:

list-style-type

property in CSS.

Without our assigning any value, at all, to the:

list-style-type

property, the default symbol that would be employed so as to introduce items of a list would be round[1] bullets.

First, let us build our list in HTML 5. Our list will concern the genres of film:

<ul>

Genres of films:

<li>Animated</li>

<li>Western</li>

<li>Thriller</li>

<li>Horror</li>

<li>Documentary</li>

</ul>

The above code generates the following unordered list:

Animated
Western
Thriller
Horror
Documentary

The above list has not been styled by CSS, at all.

However, we would obtain the same stylistic result, as regards the symbols that would be used to introduce list items should we assign the value:

disc

to the property:

list-style-type

. Hence:

ul.disc

{

list-style-type:disc;

}

Thus:

Animated
Western
Thriller
Horror
Documentary

From the above list, we can observe that the symbol that introduces each item on the list is a disc, just as it would have been, by default, had we not applied any styling, at all, to this unordered list.

Next, let us style a replica of the same list, but let us remove the disc symbol...and let us have no symbol at all introduce each list item.

We can do this by assigning the value:

none

to the property:

list-style-type

. Hence:

ul.none

{

list-style-type:none;

}

The above code generates the following list:

Animated
Western
Thriller
Horror
Documentary

We observe from the above list that the symbols that introduce each list item have been completely removed.

Next, let us style a copy of the same list; let us assign a value of:

square

to the:

list-style-type

property. Hence:

ul.square

{

list-style-type:square;

}

From employing the above styling, we get the browser to render our list, thus:

Animated
Western
Thriller
Horror
Documentary

From the above list, we can observe that the symbol that introduces each item on the list is now a square.

In CSS, we may assign the value of:

circle

so as to introduce the items of our unordered list with circles. We can do that by assigning a value of:

circle

to the property:

list-style-type

. Hence:

ul.circle

{

list-style-type: circle;

}

The above CSS code causes our browser to render our film-genres list thus:

Animated
Western
Thriller
Horror
Documentary

From the above list, we can observe that the symbol that introduces each item on our film-genres list is now a circle.

[1]. Technically, the name for this solid filled-in circular bullet symbols is ‘disc’ whereas the name of the unfilled circular bullet symbol is ‘circle.’

changing_the_unordered_list_symbols_css