CSS Lists
An unordered list:
- Coffee
- Tea
- Coca Cola
An ordered list:
- Coffee
- Tea
- Coca Cola
CSS Styling Lists
In HTML, there are two main types of lists:
- <ul> - unordered lists (list items are marked with bullets)
- <ol> - ordered lists (list items are marked with numbers or letters)
CSS has the following properties for styling HTML lists:
list-style-type- Specifies the type of list-item markerlist-style-image- Specifies an image as the list-item markerlist-style-position- Specifies the position of the list-item markerslist-style- A shorthand property for the properties above
CSS Style List-item Markers
The CSS list-style-type
property specifies the type of list-item
marker in a list.
The following example shows some of the available list-item markers:
Example
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;}
Try it Yourself »
Note: Some of the values are for unordered lists, and some for ordered lists.
CSS Replace List-item Marker with an Image
The CSS list-style-image
property is used to replace the list-item marker with an image.
Note: Always specify a list-style-type
property in addition. This property is used if the image for some reason is
unavailable.
Example
Replace the list-item markers with an image:
ul
{
list-style-image: url('sqpurple.gif');
list-style-type:
square;
}
Try it Yourself »
CSS Position the List-item Markers
The CSS list-style-position
property specifies the position of the list-item markers
(bullet points).
list-style-position: outside; means that the bullet points will be outside
the list item. The start of each line of a list item will be aligned vertically.
This is default:
- Coffee
- Tea
- Coca-cola
list-style-position: inside; means that the bullet points will be inside
the list item. As it is part of the list item, it will be part of the text and
push the text at the start:
- Coffee
- Tea
- Coca-cola
Example
Position the list-item markers:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Try it Yourself »
CSS Remove List-Item Markers
The list-style-type:none; property is
used to remove the list-item markers.
Note: A list has a default margin
and padding. To remove this, add margin:0 and padding:0 to
the <ul> or <ol> element:
Example
Remove the list-item markers:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Try it Yourself »
CSS list-style Shorthand Property
The list-style property is a shorthand property. It is used to set all the
list properties in one declaration.
When using the shorthand property, the order of the property values are:
If one of the property values above is missing, the default value for the missing property will be inserted.
Example
Use the list-style shorthand property:
ul
{
list-style: square inside url("sqpurple.gif");
}
Try it Yourself »
CSS Styling List With Colors
We can also style lists with colors, margins and padding, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:
Example
Styling lists with colors, margins and padding:
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;
}
Result:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
More Examples
Customized list with a red left border
This example demonstrates how to create a list with a red left border.
Full-width bordered list
This example demonstrates how to create a bordered list without bullets.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
All CSS List Properties
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |
