Specifies the type of marker used in the list.

Description

You use the list-style-type property to set the style of marker for a list.

The allowed values for this property is listed as follows.

  • none - No marker will be shown.
  • box
    check
    circle
    diamond
    disc
    dash square - Use the specified shape as the marker. Note that not all browsers support all shapes.
  • decimal - Use decimal numbers for the markers.
  • binary - Use binary numbers for the markers.
  • lower-alpha - Use lowercase alpha characters for the markers.
  • upper-alpha - Use uppercase alpha characters for the markers.

Example

The following shows the list-style-type property in use.


<!-- ww  w  .j  a v a 2  s .com-->
<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
    list-style-type: none;
}

li.b {
    list-style-type: disc;
}

li.c {
    list-style-type: circle;
}

li.d {
    list-style-type: square;
}

li.e {
    list-style-type: decimal;
}

li.f {
    list-style-type: lower-alpha;
}

li.g {
    list-style-type: upper-alpha;
}

li.h {
    list-style-type: lower-roman;
}

li.i {
    list-style-type: upper-roman;
}
</style>
</head>

<body>
    <ul>
        <li class="a">Point one</li>
        <li class="b">Point two</li>
        <li class="c">Point three</li>
        <li class="d">Point four</li>
        <li class="e">Point five</li>
        <li class="f">Point six</li>
        <li class="g">Point seven</li>
        <li class="h">Point eight</li>
        <li class="i">Point nine</li>
    </ul>
</body>
</html>

Click to view the demo

You can apply this property to entire lists or individual list items.





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table