Table of Contents
CSS Lists
In CSS, there are a lot of options for styling HTML lists. We can change its bullets, colors, positions etc.
Let’s have a quick review. In HTML there are two types of lists:
- <ul>:an unordered list; list items are marked with bullets
- <ol>: an ordered list; list items are marked with numbers or letters
And then we have the <li> element which defines the list items for both unordered and ordered lists.
CSS List Bullet Styles/Types
The list-style-type CSS property sets the bullet type or marker to use.
Valid Values:
- none: no bullet type
- disc: a filled circle; default value
- circle: a hollow circle
- square: a filled square
- decimal: decimal numbers e.g. 1, 2, 3
- decimal-leading-zero: decimal numbers with leading zeros e.g. 01, 02, 03
- lower-roman: lowercase roman numerals e.g. i, ii, iii
- upper-roman: uppercase roman numerals e.g. I, II, III
- lower-alpha: lowercase letters e.g. a, b, c
- upper-alpha: uppercase letters e.g. A, B, C
- lower-greek: lowercase classical greek e.g. α, β, γ
- arabic-indic: traditional Arabic-Indic numbering
- georgian: traditional Georgian numbering
- hebrew: traditional Hebrew numbering
- armenian: traditional Armenian numbering
Here is an example of an unordered list bullet types.
#ul1 {
list-style-type: none;
}
#ul2 {
list-style-type: disc;
}
#ul3 {
list-style-type: circle;
}
#ul4 {
list-style-type: square;
}
Here is an example of an ordered list bullet types.
#ol1 {
list-style-type: none;
}
#ol2 {
list-style-type: decimal;
}
#ol3 {
list-style-type: lower-roman;
}
#ol4 {
list-style-type: lower-alpha;
}
CSS List Bullet Position
The list-style-position CSS property sets the position (whether it’s outside or inside) of the bullets.
Valid Values:
- outside: sets the bullets to sit outside the list items (default)
- inside: sets the bullets to sit inside the list items
Example
#outside {
list-style-position: outside;
}
#inside {
list-style-position: inside;
}
CSS List Bullet Images
In CSS, it’s possible to have images as list bullets.
The list-style-image CSS property sets an image as bullets. Example:
ul {
list-style-image: url("heart.png");
}
However, this property is very limited in terms of controlling the position, size etc. of the bullets.
For that reason, we better use CSS background properties.
ul {
padding-left: 20px;
list-style-type: none;
}
/* the selector below targets the */
/* li elements inside the ul element */
ul li {
padding-left: 20px;
background-image: url("images/star.png");
background-position: top left;
background-size: 16px 16px;
background-repeat: no-repeat;
}
CSS List with Padding, Margin and Colors
To make lists look interesting we can add paddings, margins and colors.
Note: Any style set to the <ul> and <ol> elements affects the entire list while any style added to the <li> element only affects list items.
ol {
list-style-type: upper-roman;
color: #f8f9f9;
background: #173459;
padding: 15px;
}
ul {
list-style-type: square;
color: #f8f9f9;
background: #173459;
padding: 15px;
}
ol li {
background: #d9534f;
padding: 5px;
margin-left: 30px;
}
ul li {
background: #d9534f;
padding: 5px;
margin-left: 30px;
}