No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, bullets, or images.

First, let’s learn the two different types of lists we can create.

  • Ordered Lists: They are specified by using <ol></ol> in our HTML page. Their elements are marked with numbers or letters.
  • Unordered Lists: They are specified by using <ul></ul> in our HTML page. Their elements are marked with bullets or images.

STEP ONE:

Let’s create an HTML page with an unordered list and a ordered list to see how many styles we can give them using CSS.

STEP TWO:

Now that we have our lists ready to style, link a CSS to your HTML page and add an specification for the unordered list and one for the ordered list like shown below:

STEP THREE:

First let’s use the list-style-type to style the bullets of our unordered list:

  • Disc: the default marker type:

    Preview:
    Disc Type
  • Circle: Gives a small circle as bullet:

    Preview:
    Circle Type
  • Square: Gives a small square as bullet:

    Preview:
    Square Type
  • None: Removes any bullet or marker from the list:

    Preview:
    None Type

The list-style-type property is also used to style ordered lists. There are 11 different values to style an ordered list. This time, I am going to name the different kinds of ordered list values and give an example of each one.

  • list-style-type: armenian
    list-style-type: armenian
  • list-style-type: decimal (default type)
    list-style-type: decimal
  • list-style-type: decimal-leading-zero
    list-style-type: decimal-leading-zero
  • list-style-type: georgian
    list-style-type: georgian
  • list-style-type: lower-alpha (alphabetical order)
    list-style-type: lower-alpha
    Use list-style-type: upper-alpha to set capitals.
  • list-style-type: lower-greek

  • list-style-type: lower-latin (same as alpha / alphabetical order)
    list-style-type: lower-latin
    Use list-style-type: upper-latin to set capitals.
  • list-style-type: lower-roman
    list-style-type: lower-roman
    Use list-style-type: upper-roman to set capitals.

Now that we know the different available types of ordered list markers. Let’s style our ordered list with upper-roman numbers:

Preview:
list-style-type: upper-roman

STEP FIVE:

Did you know that you can set any image as the marker for your list? Yes, instead of using the list-style-type property we can use the list-style-image property to display any graphic.
Let’s give it a try:
Firs, download or make your desired bullet graphic and save it for web inside your images folder.
I am going to use this blue star: Blue Star Bullet

Then, add the list-style-image property to your unordered list specification and add the URL of your saved graphic:

NOTE: For cross-browser compatibility, I set the list-style-item property to none and padding and margin to 0px.

Preview:
List Style Image

This is it! As you can see, lists can be styled just like any other element. Go ahead and make your past HTML lists appealing!

Download Source Files