Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Some examples of the values we can use for the list-style-type property for unordered lists include:

  • disc
  • circle
  • square
  • decimal (essentially makes it an ordered list)
  • katakana
  • hiragana
  • lower-greek
  • lower-alpha
  • lower-roman
  • none

Some of the values we can use for the list-style-type property for ordered lists are much the same and include:

  • disc
  • circle
  • square
  • katakana
  • hiragana
  • lower-greek
  • lower-alpha
  • lower-roman
  • none

We can also use our own images or icons instead.

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<html>
    <head>
        <title>Styling lists</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <h2>Cities</h2>
        <ol class="cities">
            <li>Sydney</li>
            <li>Melbourne</li>
            <li>Brisbane</li>
            <li>Perth</li>
        </ol>

        <h2>Countries</h2>
        <ul class="countries">
            <li>Australia</li>
            <li>France</li>
            <li>Canada</li>
            <li>New Zealand</li>
        </ul>
    </body>
</html>

And here is the sample CSS code for making an ordered list use letters and an unordered list use squares. In this example, the CSS theme is only applied to the ordered list with the class name ‘cities’ and the unordered list with the class name ‘countries’ (so it doesn’t apply to any other lists on the page).

ol.cities{
    list-style-type: lower-alpha;
}

ul.countries{
    list-style-type: square;
}

You can also use images or icons instead of list-style-type:

ul.countries{
    list-style-image: url(star.png);
}

And you can also make list items display horizontally (this is example is applied to list items (li) in a list with the class name ‘countries’):

.countries li{
    display: inline;
}