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

Lists and list items are block-level elements, meaning each will get a full-page line all to themselves.</p>

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!

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.