CSS List-Style-Type Property



CSS Tutorial  >  List  >  List-style-type

The list-style-type property lets you specify a marker for the list. For unordered lists, the following list-style-type values are available:

  • none
  • disc
  • circle
  • square

    If no value is specified for an unordered list, disc is the default.

    For ordered lists, the possible values for list-style-type are as follows:

  • decimal
  • decimal-leading-zero
  • upper-latin
  • lower-latin
  • upper-roman
  • lower-roman
  • lower-greek

    Several examples are shown below:

    Example 1: Ordered list with upper-roman style

    CSS Declaration

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

    The following HTML code,
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ol>

    results in the following,

    1. item 1
    2. item 2

    In Example 1, the ordered list is shown using upper-case Roman numerals.

    Example 2: Ordered list with decimal-leading-zero style

    CSS Declaration

    ol {list-style-type:decimal-leading-zero;}

    The following HTML code,
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ol>

    results in the following,

    1. leading zero item 1
    2. leading zero item 2
    3. leading zero item 3
    4. leading zero item 4
    5. leading zero item 5
    6. leading zero item 6
    7. leading zero item 7
    8. leading zero item 8
    9. leading zero item 9
    10. leading zero item 10

    In Example 2, the list is ordered numerically, with a zero to the left of the number. Note this only applies to the first nine items on the list. Starting with the tenth item, there is no longer a zero to the left of the number. In other words, the tenth item shows up as "10." and not "010."

    Example 3: Unordered list

    CSS Declaration

    ul {list-style-type:square;}

    The following HTML code,
    <ul>
      <li>square item 1</li>
      <li>square item 2</li>
    </ul>

    results in the following,

    • square item 1
    • square item 2

    In Example 3, the bullet point is represented by a square.

    Next: CSS List-Style-Position




    Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact