In the world of web design, using lists to display a group of items in an organized or unorganized manner is very common. CSS allows you to style these lists with different features such as list-style-type, list-style-position, and list-style-image.
First, let's take a look at the list-style-type property. This property lets you define the type of marker for each list item. For example, you can choose to have list items displayed as circles, squares, numbers, or even letters.
Another important property is list-style-position, which specifies where the marker is positioned in relation to the text. You can choose between inside and outside to determine whether the markers are inside or outside of the text.
Additionally, you can also specify a custom image for the list markers using the list-style-image feature. This allows you to create a unique appearance for your lists that can enhance the overall design of your website.
All these properties can be combined using the shorthand property called list-style. This property allows you to apply all necessary styling for your list in one line of code.
Now let's look at these features in some HTML and CSS code:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS List Style Example</title>
<style>
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url('marker.png');
}
</style>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>