Telegram Group Join Now
ADVERTISEMENT
CSS Lists
In CSS, there are a lot of options for styling HTML lists. We can change its bullets, colors, positions, etc.
ADVERTISEMENT
ADVERTISEMENT
Let’s have a quick review. In HTML there are two types of lists:
ADVERTISEMENT
- <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.
ADVERTISEMENT
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.
ADVERTISEMENT
#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
ADVERTISEMENT
The list-style-position CSS property sets the position (whether it’s outside or inside) of the bullets.
ADVERTISEMENT
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:
ADVERTISEMENT
ul { list-style-image: url("heart.png"); }
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
However, this property is very limited in terms of controlling the position, size, etc. of the bullets.
ADVERTISEMENT
For that reason, we better use CSS background properties.
ADVERTISEMENT
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
ADVERTISEMENT
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; }
Portfolio Website using HTML and CSS (Source Code)
Thanks for reading! Hope you Visit our website next Time too.
ADVERTISEMENT