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.

Styling Lists

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?

1. Altering the list-style-type
2. Displaying the li tags as inline-block
3. Floating li tags

Let's look at these one by one.

Altering the 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.

Displaying li Tags in a Row

Here 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>

Shay Howe: Creating Lists Part 2

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.

Code Review

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>

Wrapping Up

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.

• CSS display: inline vs inline-block [duplicate] on Stackoverflow
• What is the difference between display: inline and display: inline-block? on Stackoverflow

Sorry, comments aren't active just yet!