List-style allows us to create or install a sign or bullet in each list post or other lists.
Rules that apply to list-style is as follows:
List-style allows us to create or install a sign / bullet in each list post or other lists.
Rules that apply to list-style is as follows:
For Example :
ul {list-style: square inside;}
ul {list-style: outside url(bullet.gif);}
ul {list-style: none;}
Here are the various list-style and way of application:
A. list-style-type
1. none
To Remove all Marks.
- ul{ list-style-type:none; }
- …
- …
2. circle
list style using cicle mark.
- ul{ list-style-type:circle; }
- …
- …
3. disc
List style using globe (default value).
- ul{ list-style-type:disc; }
- …
- …
4. decimal
List style using decimal number.
- ul{ list-style-type:decimal; }
- …
- …
- …
- …
- …
- …
- …
- …
- …
- …
5. decimal-leading-zero
List style using number with zero , from 1- 9
NB: Not working on Internet Explorer
- ul{ list-style-type:decimal-leading-zero; }
- …
- …
- …
- …
- …
- …
- …
- …
- …
- …
6. lower-roman
List Style using lower-roman.
- ul{ list-style-type:lower-roman; }
- …
- …
7. upper-roman
List style using UPPERCASE-roman.
- ul{ list-style-type:upper-roman; }
- …
- …
8. lower-alpha
List style using lower alphabet
NB: Not Working on Internet Explorer
- ul{ list-style-type:lower-alpha; }
- …
- …
9. upper-alpha
List style using UPERCASE alphabet.
NB: Not supported by Internet Explorer
- ul{ list-style-type:upper-alpha; }
- …
- …
B. list-style-position
1. inside
To mark the beginning of the text as well as limit the text that is placed on the right.
- ul{ list-style-position:inside; }
- …
- …
2. outside
To give mark that are beyond the default text
- ul{ list-style-position:outside; }
- …
- …
3. list-style-image
1. url
To create a list with a specific image.
- ul{ list-style-image:url(list_style.jpg); }
- …
- …
2. none
To remove images that applied in the above code ..
once removed, then the value will be the default.
- ul{ list-style-image:none; }
- …
- …
————————————————————————————-
Please on trial and error
For Online Demo:
Click top button for complete explanation.
Good luck.
Hopefully useful.


