There are two types of lists.
- Ordered Lists
- Unordered Lists
Ordered list
Ordered list is denoted by <ol> and ended with </ol>.
- Database by T4Tutorials
- C++ by T4Tutorials
Unordered Lists
Unordered list is denoted by <ul> and ended with </u>.
- DLD by T4Tutorials
- OOOP by T4Tutorials
An Image as The List Item Marker
1 2 3 4 |
ul { list-style-image: url('logo.jpg'); border: 5px solid blue; } |
Different List Item Markers
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ul.a { list-style-type: circle; border: 5px solid blue; } ul.b { list-style-type: square; border: 5px solid red; } ol.c { list-style-type: upper-roman; border: 5px solid green;
} ol.d { list-style-type: lower-alpha; border: 5px solid pink; } h1, p { color: purple; } |
List – Shorthand property
1 2 3 4 5 |
ul { list-style: square inside url("logo.jpg"); font-size: 30px; color: purple; } |
Position The List Item Marker
1 2 3 4 5 6 7 8 9 |
ul.a { list-style-position: outside; border: 5px solid red; } ul.b { list-style-position: inside; border: 5px solid purple; } |
Remove Default Settings
1 2 3 4 5 |
ul.r { list-style-type: none; margin: 0; padding: 0; } |
Styling List With Colors
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
ol { background: purple; padding: 30px; } ul { background: grey; padding: 35px; } ol li { background: lightgrey; padding: 5px; margin-left: 35px; } ul li { background: lightpink; margin: 10px; } |