Lists with HTML Bullets

How to list the item with different bullet styles?

Explanation

Bullets in different styles:
The lists we use in html will look like an ordinary one. We can give the bullets in different styles which makes the page to have a nice look. It is very simple task of adding an attribute to change the nature of the bullets.
There are differenet bullet styles and have a different look for the forms. Bullet styles can be customized. Let us have a list of bullet styles.

Example :

<ul>
<li> <b>Unordered Lists</b>
<ul>
<li type="disc"> Disc bullet
<li type="circle"> Circle bullet
<li type="square"> Square bullet
</ul>
<li> <b>Ordered Lists</b>
<ul>
<li> Numbered
<ul>
<li> Decimal
<li> Lowercase Roman numeral
<li> Uppercase Roman numeral
</ul>
<li> Alphabetical
<ul>
<li> Lowercase
<li> Uppercase
</ul>
</ul>

Result :

Unordered Lists
- Disc bullet
- Circle bullet
- Square bullet
Ordered Lists
- Numbered
  - Decimal
  - Lowercase Roman numeral
  - Uppercase Roman numeral
- Alphabetical
  - Lowercase
  - Uppercase

Along with bulleted lists, you can also create numbered or alphabetized lists which are known in HTML as ordered lists. To have an ordered list, you use the ol element which requires both an <ol> start tag and an </ol> end tag. Between these tags you must place at least one or more items, each of which are preceded by an <li> start tag

Example :

<ol type="a" >
<li> Decide on order type.
<li> Use appropriate order styles.
<li> Enjoy with different bullet styles.
</ol>

Result :

Decide on order type.
Use appropriate order styles.
Enjoy with different bullet styles.

Just change the type of <ol> to <ol="value"> to have the desired ordered list.

Value	Ordering Style
1	1, 2, 3, ...
i	i, ii, iii, ...
I	I, II, III, ...
a	a, b, c, ...
A	A, B, C, ...

Bullets with CSS:
Bullets can also be used with CSS to have a great look. Here let us have an example to add a gif file as bullets for a list using CSS.