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;
}

Restaurant Website Using HTML and CSS

Here is an example of an ordered list of 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");
}

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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;
}