Styling Lists

Lists can be styled like most text-based block elements, like headings and paragraphs. 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

Just like with 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 do 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 done. 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.