Lists-in-CSS
Lists
- In CSS, you can style and customize lists, such as unordered lists (<ul>) and ordered lists (<ol>), as well as list items (<li>), to fit your design requirements. Here are some common CSS properties and techniques for styling lists:
HTML Lists:
- Two types of lists in HTML -ordered list( <ol>) and ordered and unordered list(<ul>).
Ordered List:
- Ordered lists are used to present a list of items in a specific order, and they typically display each item with a number or another ordered marker.
Example:
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
Output:
- First
- Second
- Third
Unordered lists:
- Unordered lists are used to present a list of items where the order of the items doesn't matter. They are typically displayed with bullet points, but you can customize the style using CSS.
Example:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Output:
- First
- Second
- Third
CSS Lists-properties:
List Style Type:
- You can change the bullet or numbering style of the list items using the list-style-type property.
ul {
list-style-type: disc; /* Unordered list items (default) */
}
ol {
list-style-type: decimal; /* Ordered list items (default) */
}
List Style Position:
- You can control the position of the list marker (bullet or number) using the list-style-position property. The values can be inside or outside.
ul {
list-style-position: inside;
/* Place markers inside the list item */
}
ol {
list-style-position: outside;
/* Place markers outside the list item (default) */
}
List Style Image:
- You can use a custom image as the list marker by specifying the list-style-image property. This is often used to create custom bullets.
ul {
list-style-image: url('custom-bullet.png');
}
/* Or, you can use CSS generated content to create custom bullets */
ul {
list-style-type: none;
}
ul li::before {
content: "•";
margin-right: 5px;
}
Styling List Items (<li>)
- You can apply styles directly to the list items within the unordered or ordered list. Common properties include:
Margin and Padding:
- You can control the spacing around each list item using margin and padding.
li {
margin: 10px 0; /* Adds margin above and below each list item */
padding: 5px; /* Adds padding inside each list item */
}
Unordered lists Example:
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Unordered List Example</h2>
<ul class="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul class="b">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>
Output:
Unordered List Example
- First
- Second
- Third
- First
- Second
- Third
Ordered Lists Example:
<HTML>
<head>
<style>
ol.a {
list-style-type: decimal;
}
ol.b {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Ordered List Example</h2>
<ol class="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<ol class="b">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>