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: ;
}
li {
  background-color: ;
}

Coloring Text

Just like with other text elements, you can add the color property to the list items.

li {
  color: ;
}

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!