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.
A <ul> list with square bullets.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
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
Ordered List
With CSS properties you can make the following list changes:
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.
<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.
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.
<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.
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):
list-style-position: inside:
<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.
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:
Remove bullets, margin and padding:
<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 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.
<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-typelist-style-positionlist-style-image
By default, lists are displayed vertically.
To display a list horizontally use the CSS display:flex setting.
A horizontally aligned list.
<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>
