list-style-type
It is used to determine the shape of the order (a, A, 1, I, i, etc.) in ordered lists, and the shape of the sign at the beginning of the lines in unordered lists. If the value "None" is given, it ensures that no signs appear at the beginning of the lines.
list-style-image
It allows us to put a picture we want at the beginning of the lines in unordered lists (ul). Its usage is as follows:
ul {
list-style-image: url(image.png);
}
Using li:hover
It changes the appearance of the hovered element while hovering over the list elements.
Sample:
ul {
list-style-type:circle;
}
li {
width:80%;
margin:5px;
padding:4px;
}
li:hover {
color:yellow;
background-color:#003366;
list-style-type:disc;
}
In the example above, the text and background color of the hovered list element is changed. In addition, the styles applied to the li tag and the margin, padding and width values were determined to make it look smoother.
css list examples, list bullet removal, li:hover usage, list-style-type usage, ul list icon image insertion
EXERCISES
|
Applying styles to ol and ul tags
|
Try It
|
ul {
list-style-type:circle;
}
li {
width:80%;
margin:5px;
padding:4px;
}
li:hover {
color:yellow;
background-color:#003366;
list-style-type:disc;
}
Read 806 times.