CoderTools Web site

CSS Lists - Changing the list bullet using list-style-type

Description


list-style-type is a property specify which type of bullet to use.

Note: this applies not just to <li> tags but also applies to all elements with a display value of list-item.

The default is disc.
    
    list-style-type: disc;                      list-style-type: lower-greek;
    list-style-type: circle;                    list-style-type: hewbrew;
    list-style-type: square;                    list-style-type: armenian;
    list-style-type: decimal-leading-zero;      list-style-type: georgian;
    list-style-type: lower-roman;               list-style-type: cjk-ideographic;
    list-style-type: upper-roman;               list-style-type: hiragana;
    list-style-type: upper-alpha;               list-style-type: katakana;
    list-style-type: lower-alpha;               list-style-type: hiragana-iroha;
    list-style-type: none;                      list-style-type: inherit;
    
See also: list-style, list-style-image, list-style-position.

Examples for list-style-type

Example 1:

The first example shows the default position of outside the left border of the list item:
  • test
  • test
  • test
  • test
    <style>
        #test {  list-style-type: lower-greek; }
    </style>

    <ul id="test">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 2:

Decimal leading zeros:
  • test
  • test
  • test
  • test
    <style>
        #test2 li {  list-style-type: decimal-leading-zero; }
    </style>

    <ul id="test2">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 3:

This time with a alternating positions of inside.
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
    <ul>
        <li style="list-style-type:disc">test</li>
        <li style="list-style-type:circle">test</li>
        <li style="list-style-type:square">test</li>
        <li style="list-style-type:lower-greek">test</li>
        <li style="list-style-type:lower-alpha">test</li>
        <li style="list-style-type:hebrew">test</li>
        <li style="list-style-type:armenian">test</li>
        <li style="list-style-type:katakana">test</li>
    </ul>
HTML & CSS Editor with FTP / FTPS

Values for list-style


Name Values Description
list-style-position inside
outside
Specifies the positioning of the bullet. Inside for Default is outside.
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
decimal-leading-zero
lower-greek
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
none
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded.
list-style-image url(URL)
none
Specifies a url of an image to use as the bullet. Default is none.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/17/2017 8:08:05 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP