Categorized | CSS, Tutorial, Wordpress

How to Create list-style using css

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:

ul {list-style: <value list-style-type> <value list-style-position> <value list-type-image>;}

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.

Leave a Reply

*

Our Partner

Our Partner

Update ESET Nod32

Update 11322, 15 Mar 2015

Update 15 Mar 2015

~ For Eset All Version, OS XP, Vista dan Win7