Html >>Lists with HTML Bullets - (PART_53)

Topic: bullet styles

code:
<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
• Uppercas

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

Result:

1. Decide on order type.
2. Use appropriate order styles.
3. 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.

Example code:
<ul class="TickList">
<li>hscripts</li>
<li>funmin</li>
<li>indiandir</li>
</ul>

Here goes the CSS style 

<style type="text/css"> ul.TickList { list-style-image: url('tick.gif') } </style> 

 Result:

• hscripts
• funmin
• indiandir