|
|
|
Topic |
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 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
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 code:
<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.
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
|
|
|
|
|
|
