CSS Lists are used to style HTML lists. Lists are used to display information in a structured way. There are three types of lists in HTML:
Each type of list has its own unique properties and can be styled using CSS.
Unordered lists are used to display a list of items in no particular order. The items in the list are preceded by a bullet point. The HTML code for an unordered list looks like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
To style an unordered list, you can use the following CSS properties:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url('bullet.png');
}
The list-style-type property is used to specify the type of bullet point to use. The list-style-position property is used to specify the position of the bullet point (inside or outside the list item). The list-style-image property is used to specify a custom image to use as the bullet point.
Ordered lists are used to display a list of items in a specific order. The items in the list are preceded by a number. The HTML code for an ordered list looks like this:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
To style an ordered list, you can use the same CSS properties as for an unordered list:
ol {
list-style-type: decimal;
list-style-position: outside;
list-style-image: none;
}
The list-style-type property is used to specify the type of numbering to use. The list-style-position property is used to specify the position of the number (outside or inside the list item). The list-style-image property is not used for ordered lists.
Definition lists are used to display a list of terms and their definitions. The HTML code for a definition list looks like this:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
To style a definition list, you can use the following CSS properties:
dl {
list-style-type: none;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
The list-style-type property is set to none to remove the default bullet point. The dt element is styled to make the term bold. The dd element is styled to remove the default margin.
CSS Lists are a powerful tool for styling HTML lists. By using CSS, you can customize the appearance of your lists to match the design of your website. Whether you are using unordered lists, ordered lists, or definition lists, CSS provides a wide range of options for styling your lists.