Styling Lists

Like most text-based block elements, such as headings and paragraphs, lists can be styled. You can style the list as a whole (<ul>, <ol>) and/or the list items inside (<li>).

Adding a Background Color

If you want your lists to stand out from other page contents, you can use the background-color property to color behind the list, list items, or both.

ul {
  background-color: lightgrey;
}
li {
  background-color: green;
}

Coloring Text

Like other text elements, you can add the color property to the list items.

li {
  color: red;
}

Aligning Horizontally

Remember?
Lists and list items are block-level elements, meaning each will get a full-page line all to themselves.

This can be problematic if you want to create a list of links to your site pages. Without extra styling, they will appear vertically down the page, a design layout that isn’t often used. We can change this appearance using the display property, set to inline.

 li {
   display: inline;
 }

Example

See how you can make a list stand out by changing its background color, text color, and item display!

Note In the style element, the ul and the li are put together so that they both use the display:inline style. Otherwise, the list items won’t be horizontal.