Creating and Styling HTML Lists

This article is part of series: Yet Another Full Stack Development Course

You can switch to video version of this article

List is something that knows how to creep itself in any document, and our html document is no exception. You would inevitably deal with lists going forward, so why not learn what kind of lists exist in the world of web documents, and how to create and style them.

Lists come in two flavors, unordered and ordered. The difference should be self explanatory, but to clarify, an unordered list is a list which can be randomly shuffled without any negative repurcussions. Examples being a list of items to buy during grocery shopping, lists of fruits you can eat in breakfast etc. But sometimes, the order of items in the list matter, like ranking of fruits by sweetness, or list of steps to install visual studio code on your machine. Here the list must be in a particular order otherwise it looses its meaning or value. This difference must be clearly conveyed to the user via presentation of the list.

While coveying the correct meaning i.e. whether items in the list are in particular order or random to the user is the critical difference between ordered and unordered lists in HTML, the choice of name is anything but. For the developer, they are absolutely misleading names. Every person falls for the trap thinking his ordered list would be automatically sorted by browser at runtime, but sadly, that never happens. So most important takeaway here is, ordered list is a presentation construct. Its the bullet items that are different between ordered and unordered list. While unordered lists are presented by default with ellipses as bullets, ordered lists are presented with numbers like 1, 2 3 etc. Sorting the items to be shown in the list is your (developer)’s job.

Let’s begin with the unordered lists :)

Unordered lists

As the name implies, unordered lists are used to display a list of items where the order does not matter. Items are preceded by regular bullet points or ellipses. Unordered list element starts with opening or starting tag <ul>, which stands for unordered list for sure, and each item in the <ul> element is presented as a <li> element. An example should be good to clarify this

Here is an example of an unordered list in HTML:

<h1> Random list of fruits</h1>
<ul>
  <li>Grapes</li>
  <li>Apple</li>
  <li>Banana</li>
  <li>Strawberry</li>
</ul>

Each li item indicates an individual list item.

By default, the browser would add a space before and after the bullet point to give the list its distinct appearance. That is the default behavior but there are tons of styling options available for lists and list items. We’ll look into that later on but first let’s also go over how to create an ordered list

Ordered list
So for this item, I am going to reuse the list I created above but give it a different name, my list of fruits sorted by likeness

<h1> My favorite list of fruits sorted on likeness</h1>
<ol>
  <li>Grapes</li>
  <li>Apple</li>
  <li>Banana</li>
  <li>Strawberry</li>
</ol>

If you try above code in a browser, you will notice something different about ordered list, which is the items in the ordered list are appearing with 1 two three instead of bullet items, indicating a numbered list or an ordered list. The items would appear in the same order as you used in the HTML code though, and would not be sorted by browser as discussed earlier.

Styling lists

There are a bunch of CSS options that can be used to change appearance of lists in a lot of ways. We can change the type of bullet used, as well as change margins and paddings, i.e. the gaps between list items and their surrounding items. There are some advanced styling options as well but let’s start with these.

Styling bullet items

So the first very obvious aspect of a list is its bullets or artifacts that appear before the list item. Usually its a little disc that appears before each list item indicating start of the list item. But we can change the default bullet item to different shape depending on your styling requirement. The attribute responsible for doing so is the list-style-type style which is applicable on the top level list element i.e. ul or ol. Let’s try to change the appearance. So we can style the list in the style element in head element, or via external CSS. You can refer to our earlier HTML styling article on how to do so and we shall stick to the style only. So let’s go to our CSS file and add the following style for ul element.

ul {
 list-style-type: disc; /* Options: disc, circle, square, none */
 }

In visual studio code, you would notice that if you are not copy pasting, but typing this style above, as soon as you type the : following list-style-type, you would get a popup with all the applicable options like disc, circle, square, none etc, and you can choose the one you like.

To bring back the popup, place the cursor after the :, and remember there shouldn’t be any text immediately following the cursor, so add some spaces if you pasted the snippet. Now press Ctrl+space and the popup with values would reappear. You can choose the style via arrow keys and press enter to apply. Note the options listed in snippet are enclosed in /* and */ and hence are comments, which are ignored by browser and not effect output in any way. They are just for your reference.
So if I change the value to circle, you would notice in preview that the bullet points change to circle.

For ordered lists i.e. ol, there are plenty of options available as well. You can choose a numbering system from decimal, to lower-greek, which would list the items using lower greek alphabets. You can use upper or lower roman via lower-roman and upper-roman. You also have option to choose latin and even georgian, hebrew, armenian and katakana or japanese numbering systems. See popup for all options available and see the results in the browser.

ol {
 list-style-type: lower-roman; 
 }

You can even have your own bullet item created. Let’s try that real quick. So let’s open paint or your favorite graphics editor and let’s create a little bullet point. Let’s say we create a red colored star shape, and create a star sign on the canvas. Keep the size small since its a bullet item like 10px by 10px. Save it say as starbullet.png in the same folder as your html file.
Now there are several ways to use that. One way is to replace list-style-type with list-style-image, and in the value use url(https://medium.com/%E2%80%98./starbullet.png%E2%80%99)

ul {
 list-style-image: url(https://medium.com/%E2%80%98starbullet.png%E2%80%99); /* Use custom image as bullet */
 padding-left: 20px; /* Adjust padding if necessary */
 }

You would see the list change and your created shape appearing as bullet items. You can use the padding-left and padding-right to control the spacing between bullet item in your shape and its left and right outer boundary. padding-left controls how much spacing should be added between the bullet item and its left side, and padding right determines the gap between bullet and content of list item. Please experiment changing the padding to see how it behaves. Remember experimentation and curiosity is necessary to learn styling. Don’t be afraid to play with the values and options whenever you get a chance.

This looks good, but it would look horrible if say your image was big. So an alternative way, and one which gives you more control on the size of item is to apply bullet item as a background image for list item. Let me show you how to do so.

We are going to use the same starbullet.png, or you can create another bigstar.png file and save it in the same folder. Now change the css like below

ul {
 list-style-type: none; /* Remove default bullets */
 padding-left: 20px; /* Adjust padding to make space for the image */
}
ul li {
 background: url(https://medium.com/%E2%80%98bigbullet.png%E2%80%99) no-repeat left center;
 background-size: 1em 1em; /* Adjust size as needed */
 padding-left: 1.5em; /* Adjust padding to make space for the image */
}

This is a bit complex but works with large images too. Here we first removed the bullets entirely on the list element itself, so by default, the list would be shown without any bullet items. Then we apply a style on individual list items by using the CSS selector ul li which means apply the following style on li elements enclosed in a ul element. This is the syntax you would see regularly going forward as it is an extremely useful CSS technique to select the element to apply the style on. Now note carefully what we are doing here, we are first applying a background image on the entire list item using the background style on list item or li element.

Get Ali Aslam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This would make the image appear as background of entire list item, and depending on size of image, it would start repeating if image is too small to fill the entire content of list item. We stop that from happening by using no-repeat, and also add left center to specify the position of background image to left center position of list item. Note with the first line only, the image would still bleed into the content of the list item. Please do experiment removing each entry individually to see the effects in live preview.

In next line, we do what we started off to do i.e. control the size of image to our choosing, using the background-size property. Here we use background-size property to shrink the image to a fixed size i.e. 1em wide by 1em high. em is a unit of measure used by text where em is the current font size. Note if the content of a list item is text, then the height of list item is determined by font size of that text. 1em would exactly equal to the font size being used by the text content in list item. So your image would appear as high and and as wide as any single character in your text is high and wide.

In other words, your image would be the size of your text and would not inflence or alter the height of a line item in any way with 1em. Note em is a relative unit of measure so 2em would be twice as high as the text and would double the size of your list item. Do try this on your own playing with different values of em. (note font size can be manipulated using font-size style property which you can play with as well).

Note incoming article in series is dedicatedly about background images so you would get much more insight into how they work in that one. For now this should be enough knowledge.

Adding border to list items

You can show a box around individual list items by using the border style property. By default, the border is not shown around list items, but it does exist. The padding property you used is the gap between the invisible border and contents of a list item. However, we can make the border visible by adding the border style to li item. Taking the last example (or use the ul li selector item for whichever example you are following), add the following line to the style definition

border: 1px solid black;

You would notice black border appearing around the list items, with thickness equal to 1 pixel, type of solid and color black. All three are totally customizable and i encourage you to remove any in visual studio code, and press Ctrl+Space to see the list of available options and experiment with them. Borders are immensely useful style attribute present on almost all HTML elements and manipulating them should be at your fingertips.

You would notice, however, that the bottom border is thicker than the rest, and the reason being two borders are overlapping there. We can fix it easily by using another style attribute available on list item called margin. Margin is commonly used alongside border. Knowing the difference is of critical importance. Margin is the gap between the element and its surroundings. Padding is gap between contents of an element and its border. Since we are trying to push element away from other elements, we would use margin property here like below

margin: 5px;

And you would notice the elements are separated by a little gap and thick, varying width borders get fixed.

Margin and padding would be covered in detail later on. But for now, the diagram below would be helpful to understand.

+ — — — — — — — — — — — — — -+
| Margin |
| + — — — — — — — — — — -+ |
| | Border | |
| | + — — — — — — — -+ | |
| | | Padding | | |
| | | + — — — — -+ | | |
| | | | Content | | | |
| | | + — — — — -+ | | |
| | + — — — — — — — -+ | |
| + — — — — — — — — — — -+ |
+ — — — — — — — — — — — — — -+

Horizontal lists (optional)

Ideally, this should not be part of introductory article on lists and styling, but mentioning it for completeness anyway. I would not explain it since it involves concepts that we haven’t introduced yet. So horizontal lists are those in which list items appear side by side, instead of layered top to bottom vertically. To make the magic happen, the abracadabra is given below

ul {
 list-style-type: none; /* Remove bullets since items would appear without them */
 padding: 0; /* Remove default padding */
 display: flex; /* Use flexible display style in which by default, elements are laid out row wise */
}

ul li {
 margin-right: 20px; /* Adjust spacing between horizontal items */
}

The magic line in above snippet is display: flex. By default HTML uses something called CSS box model, but we are changing display style to flex, which is a CSS property used to design flexible and responsive layouts. By default items in this display mode are arranged in a row, and we used that feature to display the list horizontally. If it is not making any sense, it is not meant to at this stage of learning. It eventually would as we go forward in our article series though. I just added it here so if you need to use horizontal lists, you can find this article and know how to do so.

Nested lists
The last optional concept that we would cover would be nested lists. Note that we have restricted ourselves to list items that were text based until now. But a list item can be anything, it can be an image, a link, or even another list. Awesome right? Let’s give it a try

in CSS

ul ul {
 list-style-type: circle;
 padding-left: 20px;
}

HTML

<ul>
 <li>Outer list Item 1
   <ul>
   <li>Nested list Item 1</li>
   <li>Nested list Item 2</li>
   </ul>
 </li>
 <li>Outer list Item 2</li>
</ul>

Here the main magic line is the CSS selector ‘ul ul’, which as you know by now means style defined for child item enclosed within content of parent item. In this case, the style defined for ul ul is for the nested list (second one in selector) enclosed within the outer list (first one in selector)

Here we are giving the bullet items a different bullet style than the outer one just to make the distinction clear. However, this is optional and nested list would still work without. The most important magic line is the padding-left: 20px which pushe the nested list 20px to the right of the outer one.

Can you guess what is the best feature of this CSS? This style is applicable to infinitly nested lists. Yea the list-style-type is going to be an issue, but most browsers would be smart enough to change the bullet automatically if they detect a nested list. Try the following and see how it is rendered.

CSS

ul ul {
 padding-left: 20px;
}

HTML

<ul>
 <li>Outer list Item 1
   <ul>
       <li>Nested list Item 1</li>
       <li>Nested list Item 2</li>
       <li>
         <ul>
           <li>Double nested list Item 1</li>
           <li>Double nested list Item 2</li>
         </ul>
       </li>
    </ul>
 </li>
 <li>Outer list Item 2</li>
</ul>

In most browsers, the bullets would be automatically changed by the browser for each level as it detects a list enclosed in content of another list.

This is it for lists and their styling. If you liked, please clap/share and subscribe to our YouTube channel to be notified of exciting content like this.

Thank you.

Next article: Comprehensive guide to HTML background images