Loading...

Maybe you don’t always want to use a number or bullet point.

Lists have one other CSS specialty. You can use the list-style-type property to determine what label they use. If applied to an <li> tag, only that one list item will adopt the new label. But if this property is targeted at an <ol> or <ul> tag, every list item in that list will use that label. The tables below contain the most common value keywords for ordered and unordered lists. Note that it is still acceptable for ordered lists to set their labels using the “type” attribute, but the list-style-type property is the preferred method.

Value Display
decimal
  1. First Item
  2. Second Item
  3. Third Item
upper-alpha
  1. First Item
  2. Second Item
  3. Third Item
lower-alpha
  1. First Item
  2. Second Item
  3. Third Item
upper-roman
  1. First Item
  2. Second Item
  3. Third Item
lower-roman
  1. First Item
  2. Second Item
  3. Third Item
Value Display
disc
  1. First Item
  2. Second Item
  3. Third Item
circle
  1. First Item
  2. Second Item
  3. Third Item
square
  1. First Item
  2. Second Item
  3. Third Item
none
  1. First Item
  2. Second Item
  3. Third Item

You can even create a custom label by adding an image you designed via the list-style-image property. This property is expressed as list-style-image:url(“Name of Image Here”).You just need to add a link to the image you’d like to use inside quotation marks, like in the example below.

<style>
ul.custom {
list-style-image:url("smiley.png")
}
</style>


<ul class="custom">
<li>List items with custom labels</li>
<li>List items with custom labels</li>
<li>List items with custom labels</li>
</ul>
  • List items with custom labels
  • List items with custom labels
  • List items with custom labels

Don’t forget that you can add an id or class to your lists, and use that as your selector. This can be useful when you need some variety in your list styling.