CSS Code for Bullets and Numbered Lists

Bullet Points
  • Circle
  • ul {
    list-style: circle;
    }
  • or inline
  • <li style=”list-style: circle;”>item</li>
  • None
  • ul {
    list-style: none;
    }
  • or inline
  • <li style=”list-style: none;”>item</li>
  • Square
  • ul {
    list-style: square;
    }
  • or inline
  • <li style=”list-style: square;”>item</li>
  • Disc
  • ul {
    list-style: disc;
    }
  • or inline
  • <li style=”list-style: disc;”>item</li>
Numbered and Outline Style Lists
  • Decimal
  • ol {
    list-style: decimal;
    }
  • or inline
  • <li style=”list-style: decimal;”>item</li>
  1. Decimal Leading Zero
  2. ol {
    list-style: decimal-leading-zero;
    }
  3. or inline
  4. <li style=”list-style: decimal-leading-zero;”>item</li>
  • Upper Alpha
  • ol {
    list-style: upper-alpha;
    }
  • or inline
  • <li style=”list-style: upper-alpha;”>item</li>
  1. Lower Alpha
  2. ol {
    list-style: lower-alpha;
    }
  3. or inline
  4. <li style=”list-style: lower-alpha;”>item</li>
  1. Upper Latin
  2. ol {
    list-style: upper-latin;
    }
  3. or inline
  4. <li style=”list-style: upper-latin;”>item</li>
  1. Lower Latin
  2. ol {
    list-style: lower-latin;
    }
  3. or inline
  4. <li style=”list-style: lower-latin;”>item</li>
  1. Upper Roman
  2. ol {
    list-style: upper-roman;
    }
  3. or inline
  4. <li style=”list-style: upper-roman;”>item</li>
  1. Lower Roman
  2. ol {
    list-style: lower-roman;
    }
  3. or inline
  4. <li style=”list-style: lower-roman;”>item</li>
  1. Lower Greek
  2. ol {
    list-style: lower-alpha;
    }
  3. or inline
  4. <li style=”list-style: lower-greek;”>item</li>
  1. Armenian
  2. ol {
    list-style: armenian;
    }
  3. or inline
  4. <li style=”list-style: armenian;”>item</li>
  1. Georgian
  2. ol {
    list-style: georgian;
    }
  3. or inline
  4. <li style=”list-style: georgian;”>item</li>
inherit
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul {
list-style: square url(“image.jpg”);
}

li {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}