How to Style Lists with CSS

HTML lists can have a number of different styles applied using CSS. Here are some of the commonly used ones.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 1.5em;
    list-style-type: circle;
  }
</style>

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

List Style Image

For more information on using images for your bullet points, see list-style-image.

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 22px;
    list-style-image: url("/pix/samples/bullet1.png");
  }
</style>

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

List Style Position

Determines whether the bullet is located inside the list's containing box or outside. For more info, see list-style-position.

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 1.5em;
  }
  .inside {
    list-style-position: inside;
  }
  .outside {
    list-style-position: outside;
  }
</style>

<ul class="inside">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>
<ul class="outside">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

List Style

The list-style property is shorthand for setting the list properties.

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 1.5em;
    list-style: square inside;
  }
</style>

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

Unstyled Lists

By default, most browsers style lists in a certain way. For example, most lists have a bullet point or other list marker for each item. Lists also typically have padding and margin applied.

However, you might not always want lists to appear this way. In fact, it's very common for developers to use unstyled lists. Unstyled lists are those that have had any padding, margin, and list marker removed.

Unstyled lists are often used in website navigation, and other places where any list marker, padding, and margins, would just get in the way.

Here's an example of an unstyled list:

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 22px;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
</style>

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Watermelons</li>
</ul>

Inline Lists

You can take it a step further and turn the unstyled list into an inline list.

You can do this by setting display: inline-block; against the li elements.

<!DOCTYPE html>
<title>Example</title>
<style>
  ul {
    font-size: 22px;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
  ul > li {
    display: inline-block;
  }
</style>

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Watermelons</li>
</ul>