CSS Styling Lists
In HTML there are two main types of lists:
<ul>— unordered lists, where items are marked with bullets.<ol>— ordered lists, where items are marked with numbers or letters.
CSS has these properties for styling lists:
list-style-type— sets the type of marker.list-style-image— uses an image as the marker.list-style-position— sets the position of the markers.list-style— a shorthand for the properties above.
CSS Style List-item Markers
The list-style-type property sets the type of marker for a list.
Note: Some values are for unordered lists and some for ordered lists.
Example
Several marker types are shown: circle, disc, square, upper-roman, lower-roman, lower-alpha, and decimal.
<style> block, make unordered list classes a, b, c with circle, disc, square; and ordered list classes d, e, f, g with upper-roman, lower-roman, lower-alpha, decimal. Add a list of each class with a few items.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
</style>
</head>
<body>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="c"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ol class="d"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="e"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="f"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="g"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
</body>
</html>
CSS Replace List-item Marker with an Image
The list-style-image property replaces the marker with an image.
Note: Also set a list-style-type as a fallback in case the image is unavailable.
Example
The markers are replaced with an image, with square as the fallback.
<style> block, set a <ul> list-style-image to url('sqpurple.gif') and also list-style-type square as a fallback. Add a list with a few items.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-image: url('sqpurple.gif');
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
CSS Position the List-item Markers
The list-style-position property sets where the markers sit.
outside (the default) puts the markers outside the list item, so the text of each item lines up vertically. inside puts the markers inside the list item, so they become part of the text and push it along.
Example
One list uses outside markers and the other uses inside markers.
<style> block, make one <ul> class with list-style-position outside (the default) and one with inside. Give each list a border so the difference in where the markers sit is clear. Add a list of each class.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {
list-style-position: outside;
border: 1px solid black;
}
ul.b {
list-style-position: inside;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>outside (default)</h2>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<h2>inside</h2>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
</body>
</html>
CSS Remove List-Item Markers
Set list-style-type: none to remove the markers.
Note: A list has default margin and padding. To remove them, add margin: 0 and padding: 0 to the <ul> or <ol>.
Example
The markers and default spacing are removed from the list.
<style> block, set a <ul> list-style-type to none, margin to 0, and padding to 0. Add a list with a few items.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
CSS list-style Shorthand Property
The list-style property is a shorthand for setting all the list properties in one declaration.
The order of the values is: list-style-type, list-style-position, list-style-image. If a value is missing, its default is used.
Example
One shorthand sets the marker type, position, and image together.
<style> block, set a <ul> list-style to "square inside url('sqpurple.gif')" (type, position, image in that order). Add a list with a few items.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
CSS Styling List With Colors
You can also style lists with colors, margins, and padding to make them more interesting.
Anything added to the <ol> or <ul> affects the whole list, while properties on the <li> affect the individual items.
Example
The lists and their items are given different background colors, padding, and margins.
<style> block, give <ol> a salmon background and padding, and <ol> <li> a mistyrose background, darkred text, padding, and left margin. Give <ul> a powderblue background and padding, and <ul> <li> a mistyrose background, darkblue text, and margin. Add an ordered list and an unordered list.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ol {
background: salmon;
padding: 20px;
}
ol li {
background: mistyrose;
color: darkred;
padding: 10px;
margin-left: 20px;
}
ul {
background: powderblue;
padding: 20px;
}
ul li {
background: mistyrose;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
All CSS List Properties
A summary of the list properties:
list-style— sets all the list properties in one declaration.list-style-image— uses an image as the marker.list-style-position— sets the position of the markers.list-style-type— sets the type of marker.