Tag Archives: styling

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

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

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.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:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}