In this fifth part of our guide, we decide to go into something a little more simple: lists. This guide talks about how to stylize them in CSS.
Previously, we talked about links which is something almost every web developer uses. In this next part, we’re going to talk about how to stylize lists. After all, lists are a great way to organize thoughts, so why not make them look good in the process?
Adding CSS Style to Our Lists
Now, you are already familiar with ordered lists, unordered lists, and list items via HTML. Impressively, though, we can add some interesting style to them. First, we’re going to start off with two separate lists in our HTML.
… and the end result without styling is:
OK, so we got some stuff going on here. There is a nested list being displayed. However, let’s say we want to change things up in CSS. How to we do that?
First, let’s try changing our unordered list to have a square bullet point instead of a disc. Luckily, this is very easy to do. First we need to open our CSS file.
Next, we need to type in the code ul { list-style-type: square;} like so:
The end result I got is this:
OK, so we are able to change the bullet points. That’s pretty cool. The only problem is that it changed every bullet point including what is in out nested list. So, let’s try modifying the nested points. Well, like our HTML, our CSS needs to have a nested rule too.
So, the next thing we need to add is ul li li { list-style-type: circle; } like so:
Let’s take a look at what we got after all of that:
Hey! That’s not bad!
OK, so let’s try modifying our ordered list. We’re going to add a little extra effort on this next one as well. First of all, I see that the nesting isn’t working. When I look back at the HTML, I realize that I didn’t catch that I forgot to add additional OL tags. So, let’s first fix that:
The end result is this:
OK, so now that we fixed out HTML, let’s move on to adding the CSS.
First of all, the numbers seem to be fine. To make sure nothing changes on us unknowingly, let’s first add ol { list-style-type: decimal; } like so:
Next, we are going to make the nested style display lower case alphabet letters. For that, type in ol li li { list-style-type: lower-alpha; } into the CSS like so:
The end result?
There we go! That’s actually looking like a pretty good list.
A question you may have is if you can customize those bullet points. It’s very easy to do once you have the image ready. When you have the picture, use the code list-style-image: url([file path of image here];. It’s very similar to the background images we made earlier in the guide. Just try not to go overboard or else you’d risk making your bullets distracting.
A question you may have is how you can affect the indentation. This is a very easy thing to do. All you need to do is remember what we did when we added margins between our paragraphs. In this case, we want to change the left margin. By default, there is some margin added, so if you want to go less then the default, you’ll likely have to use a negative value. Let’s try adding margin-left: -15px; to our ol rule like so:
The end result for me is this:
That’s not looking too bad at all. Naturally, we can further mess with this by adjusting line heights, fonts, colours, and a whole lot more, but that should cover the basics right here.
Congratulations! You now have a basic understanding of adding CSS style to your lists!