CSS Lists

An HTML list displays a number of items with bullets or numbers.

CSS can style lists by setting the marker, color, and even removing the bullets.

Example

#

A <ul> list with square bullets.

  • HTML
  • CSS
  • JavaScript
<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

List properties

Lists display items with a marker (e.g. bullet, disc, letters or numerical order).

A list can be defined as unordered or ordered as shown below.

Unordered List

  • HTML
  • CSS
  • JavaScript

Ordered List

  1. HTML
  2. CSS
  3. JavaScript

With CSS properties you can make the following list changes:

  • Change the list item markers
  • Use an image as the list item marker
  • Add background colors to lists and list items

List Item Markers

The list-style-type property specifies the marker type.

Possible values include: disc, circle, decimal, square, and more.

A list with a value of none will have no marker.

Four lists with different marker types.

  • HTML
  • CSS
  • JavaScript
  • HTML
  • CSS
  • JavaScript
  1. HTML
  2. CSS
  3. JavaScript
  1. HTML
  2. CSS
  3. JavaScript
<style>
  ul.circle {
    list-style-type: circle;
  }

  ul.square {
    list-style-type: square;
  }

  ol.upper-roman {
    list-style-type: upper-roman;
  }

  ol.lower-alpha {
    list-style-type: lower-alpha;
  }
</style>

<ul class="circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ul class="square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol class="upper-roman">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol class="lower-alpha">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

For details on list-style-type, see our CSS list-style-type Property Reference.


Image Marker

To specify a custom image marker use the list-style-image property.

Note that the size of the marker images cannot be changed with CSS.

This list uses an image as the item marker.

  • HTML
  • CSS
  • JavaScript
<style>
  .marker {
    list-style-image: url('/img/css/leaf_icon.jpg');
  }
</style>

<ul class="marker">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

For details on the list-style-image, see our CSS list-style-image Property Reference.


Marker Positions

The list-style-position property sets the marker position in the list.

Possible values are: inside and outside.

Two lists showing outside and inside marker positions.

list-style-position: outside (default):

  • HTML
  • CSS
  • JavaScript

list-style-position: inside:

  • HTML
  • CSS
  • JavaScript
<style>
  ul.outside {
    list-style-position: outside;
  }

  ul.inside {
    list-style-position: inside;
  }
</style>

<p>list-style-position: outside (default):</p>
<ul class="outside">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>list-style-position: inside:</p>
<ul class="inside">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

For details on the list-style-position, see our CSS list-style-position Property Reference.


Removing Items Markers

The list-style-type: none removes list item markers.

Lists have margin and padding which can also be set to 0

A list without item markers and no margin or padding.

Default list:

  • HTML
  • CSS
  • JavaScript

Remove bullets, margin and padding:

  • HTML
  • CSS
  • JavaScript
<style>
  ul.no-marker {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
</style>

<p>Default list:</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>Remove bullets, margin and padding:</p>
<ul class="no-marker">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The list-style Property

The list-style property is a shorthand property.

Shorthand properties set multiple properties at once: type position and image.

This list uses an image marker and positioned inside the list.

  • HTML
  • CSS
  • JavaScript
<style>
  .stars {
    list-style: disc outside url('/img/css/star.png');
  }
</style>

<ul class="stars">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

This is the order of property values when using shorthand property:

  • list-style-type
  • list-style-position
  • list-style-image

Did you know?

Did you know?

Horizontally aligning lists

By default, lists are displayed vertically.

To display a list horizontally use the CSS display:flex setting.

A horizontally aligned list.

  • HTML
  • CSS
  • JavaScript
<style>
  .horizontal {
    display: flex;
    list-style: disc inside url('/img/css/star.png');
  }

  .horizontal li {
    margin-left: 20px;
  }
</style>

<ul class="horizontal">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

You may also like

Guides