list item elements

list item elements

CSS allows to create new type of lists to define the visual formatting of the lists. Custom lists can be created by setting the value of "display" property of an element to list-item.

snippet
<html> 
<head> 
    <style> 
        p{ display: list-item} 
    </style> 
</head> 
<body> 
    <form> 
        <p>paragraph 1</p> 
        <p>paragraph 2</p> 
        <p>paragraph 3</p> 
        <p>paragraph 4</p> 
    </form> 
</body> 
</html>
list-style-type

The list-style-type property is used to define the leading symbol that is rendered for each list item.

The possible values are.

disc | circle | square
decimal | decimal-leadin-zero
lower-roman | upper-roman
lower-greek
lower-alpha | upper-alpha
lower-latin | upper-latin
herbian | Armenian | Georgian
cjk-ideographic | hiragana | katakana | hirogana-iroha | katokana-iroha
none
snippet
<html> 
<head> 
</head> 
<body> 
    <form> 
        <table> 
            <tr> 
                <td> 
                    <ul style="list-style-type: disc"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: circle"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: square"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: decimal"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: decimal-leading-zero"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: lower-roman"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: upper-roman"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    <ul style="list-style-type: lower-greel"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: lower-alpha"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: upper-alpha"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: lower-latin"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: upper-latin"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    <ul style="list-style-type: disc"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: hebrew"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: Armenian"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: Georgian"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: cjk-ideographic"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: hiragana"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: katakana"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: hiragana-iroha"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                    <ul style="list-style-type: katakana-irohana"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
                <td> 
                    <ul style="list-style-type: none"> 
                        <li>item 1</li> 
                        <li>item 2</li> 
                    </ul> 
                </td> 
            </tr> 
        </table> 
    </form> 
</body> 
</html>
list-style-image

The list-style-image property allows to define a leading image that is rendered for each list item.

The possible values are.

<url>e.g. url("fellas.jpg")
none
snippet
<html> 
<head> 
</head> 
<body> 
    <ul style="list-style-image: url(" bullet-1.png ")"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
    <ul style="list-style-image: url(" bullet-2.png ")"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
    <ul style="list-style-image: url(" bullet-3.png ")"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
</body> 
</html>
list-style-position

The list-style-position property allows to define the position (inside or outside of the list item box) for the leading symbol/ image that is rendered for each list item.

The possible values are.

inside
outside (default value)
snippet
<html> 
<head> 
    <style> 
        body *{ border: 1px solid #000000} 
    </style> 
</head> 
<body> 
    <ul style="list-style-type: cicle; list-style-position: inside"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
    <ul style="list-style-type: square; list-style-position: outside"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
    <ul style="list-style-image: url('bullet-1.png'); list-style-position: inside"> 
        <li>item 1</li> 
        <li>item 2</li> 
    </ul> 
</body> 
</html>
list-style

The list-style property is the shorthand to define the style of the list item.

The possible values are.

<list-style-type> <list-style-position> <list-style-image> Note:
Note
If the image file is missing, the leading symbol will be rendered.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #