CoderTools Web site

CSS - Changing the list-style of HTML Lists

Description



list-style is a short-hand command to change 3 properties or styles of HTML lists.

Specifically the <li> tags.
    list-style:  
        list-style-type
        list-style-position
        list-style-image;
See also: list-style-type, list-style-image, list-style-position.
HTML & CSS Editor with FTP / FTPS

Examples for list-style

Example 1:

  • test
  • test
  • test
  • test
    <style>
        #test { list-style: square outside none; }
    </style>

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

Example 2:

  • test
  • test
  • test
  • test
    <style>
        #test2 { list-style: inside url(images/bullet.gif); }
    </style>

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

Example 3:

  • test
  • test
  • test
  • test
    <style>
        #test3 { list-style: outside url(images/bullet.gif); }
    </style>

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

Values for list-style


Name Values Description
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded.
list-style-position inside
outside
Specifies the positioning of the bullet. Inside for Default is outside.
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).

3/27/2017 1:24:19 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP