These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
Who ordered the styled list? Anybody? Hmm... must be unordered then...
In this lesson we'll take you on a tour of styling those boring HTML lists that could use some decoration. We'll introduce some specific CSS properties that you can use to change the appearance of lists. We'll also have you read through a walkthrough that guides you through further details about how you can spruce up the old HTML lists to look nice and fancy. By the end of the lesson you'll have a great idea of how you can manipulate lists with CSS.
There are a few simple ways that you can change the appearance of HTML lists with almost no effort at all. Sounds great doesn't it?
list-style-type
li
tags as inline-block
li
tagsLet's look at these one by one.
list-style-type
The list-style-type
property controls the appearance of the bullet in unordered lists and the numeric value in ordered lists. You can specify a bunch of different settings that are outlined in the MDN docs. Many times you'll set these to various values for varying nested levels of lists. Here is a simple example:
ul {
list-style-type: square;
}
This would change all ul
tags to be displayed with black squares for bullets.
li
Tags in a RowHere we can describe two ways of accomplishing the same goal. That goal is to display the list items in a single line. You can do this in a single line of CSS by specifying the display of the li
tags to be inline-block
.
li {
display: inline-block;
}
Another way to accomplish the same effect is to display the li
as block
and float them to the left. Since the main difference between block
and inline-block
is that block
elements have line breaks before and after them, floating the element effectively changes the element into an inline-block
. Floating just gives you a bit more control. For more info on the differences between block
and inline-block
checkout out the additional resources for this lesson.
li {
display: block;
float: left;
}
Using floats means that you'll need to use the clearfix on the parent ul
or ol
tag to contain the floated li
tags within the list.
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
There are many more details to styling lists. Your task is to read through Shay Howe's walkthrough on Creating Lists. If you haven't already gone through the section on styling lists you should read through that now. Play around with the various live code examples to see how they work.
The important bits of code from this lesson
ul {
list-style-type: square;
}
li {
display: inline-block;
}
li {
display: block;
float: left;
}
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
You'd be surprised just how often you use lists in everyday markup. Lists are all over the place and disguised cleverly with CSS styling in many of the web apps that you use all the time. As such, it will benefit you greatly to use the skills you've learned in this lesson in your own web pages to bring the same variety to displaying HTML lists.