Today we’re going to talk about list styles. Lists are a vital commodity to web site creation. Most side-navigation menus and inline menus are actually lists that are simply listing the things we want them to. From there, we can add styles to these lists and manipulate them however we please.

Lists

In HTML there are two types of lists:

  • Ordered Lists <ol>
  • Unordered Lists

    Ordered Lists are usually marked with numbers or letters whereas Unordered Lists are usually marked with bullets or squares.

    List Type

    We can change how a list looks by using the list-style-type property. Consider the following code:

    ul {list-style-type:circle;}
ol {list-style-type:upper-roman;}

    The CSS code above will make all ul elements have a list style type of a circle and all ol elements have a list style type of upper roman numerals. The output will look like the following:

    • Item 1
    • Item 2
    1. Item 1
    2. Item 2

    Properties

    We can have a few properties for list types and those properties operate the same way as the background properties

    Property Description Values
    list-style This is the all-inclusive property where you can define all of the values list-style-type
    list-style-image
    list-style-position
    list-style-type This property will define type of list style you wish to have in the <li> element. none
    disc
    circle
    square
    decimal
    decimal-leading-zero
    armenian
    georgian
    lower-alpha
    upper-alpha
    lower-greek
    lower-latin
    upper-latin
    lower-roman
    upper-roman
    hebrew
    cjk-ideographic
    hiragana
    hiragana-iroha
    katakana
    katakana-iroha
    list-style-image This property will allow you to define an image as the list marker. url(image url)
    none
    list-style-position This property will allow you to specify whether you want the list to be inside or outside the content flow. inside
    outside

    We can also narrow down the list-style and list-style-type properties for each list element.

    Unordered Lists

    For unordered lists we can use the following values:

    • circle
    • disc
    • square
    • none

    Technically we can use any of the values listed in the table above, however, the purpose of the unordered list would cease to exist.

    Ordered Lists

    We can have many options for the ordered list. Out of the 23 values we posted for list-style-type, only three were solely for unordered lists. We can use the following values:

    1. decimal
    2. decimal-leading-zero
    3. armenian
    4. georgian
    5. lower-aplha
    6. upper-alpha
    7. lower-greek
    8. upper-greek
    9. lower-latin
    1. upper-latin
    2. lower-roman
    3. upper-roman
    4. hebrew
    5. cjk-ideographic
    6. hiragana
    7. hiragana-iroha
    8. katakana
    9. katakanap-iroha

    Using images with lists

    Using images can spice up just a standard web page by a lot. It is very easy to create your own bullet, circle, square, or a small arrow pointing toward the item you are showing in the list. We can use the all-inclusive,

    list-style:url ("image/bullet.png");
/*OR*/
list-style-image:url ("image/bullet.png");

    This will replace the default bullet in the unordered list with an image of our choice.

    To see these properties in action feel free to click on the download button below!

    lists.zip
    lists.zip
    Size: 9.76 KB