Sunday, January 19, 2014

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.

ValueOrdering Style
11, 2, 3, ...
ii, ii, iii, ...
II, II, III, ...
aa, b, c, ...
AA, 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