CSS LISTS AND TABLES
CSS LISTS
In CSS, there are a lot of options for styling HTML lists. We can change its bullets, colors, positions etc.
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
The list-style-type CSS property sets the bullet type or marker to use.
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 classicalg reek e.g. a, β, γ
arabic-indic: traditional Arabic-Indicn umbering
georgian: traditional Georgian numbering
hebrew: traditional Hebrewn umbering
armenian: traditional Armenian numbering
Example of an unordered list bullet types.
Syntax:
list-style-type: none:
List-style-type: disc;
List-style-type: circle:
List-style-type: square:
Example of an ordered list bullet types.
Syntax
List-style-type: none;
list-style-type: decimal;
List-style-type: Lower roman:
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.
outside sets the bullets to sit outside the list items (default) inside: sets the bullets to sit inside the list items
Example
list-style-position: outside
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:
list-style-image: url("heart.png");
However, this property is very limited in terms of controlling the position, size etc. of the bullets.