Styling List in CSS
Styling Lists
• Lists are very helpful in conveying a set of either numbered or bulleted points.
• There are following four CSS properties which can be used to control lists:
- list-style-type
- list-style-position
- list-style-image
- list-style
- List-style-type
-
• The list-style-type property allows us to control the shape or style of marker in the list.• For unordered lists possible values are:
- none
- disc
- circle
- squre
List-style-type
For ordered lists possible values are
|
||
Value |
Description |
Example |
decimal |
Number |
1,2,3,4,5 |
decimal-leading-zero |
0 before the number |
01, 02, 03, 04, 05 |
lower-alpha |
Lowercase alphanumeric characters |
a, b, c, d, e |
upper-alpha |
Uppercase alphanumeric characters |
A, B, C, D, E |
lower-roman |
Lowercase Roman numerals |
i, ii, iii, iv, v |
upper-roman |
Uppercase Roman numerals |
I, II, III, IV, V |
list-style-position
• The list-style-position property specifies that the the list-item markers should appear more indented
• It has 2 possible values :
- inside
- outside