CSS Lists
CSS lists allow you to style HTML lists, which come in two main types:
1. Ordered Lists (<ol>) – These are lists where the items are numbered.
2. Unordered Lists (<ul>) – These are lists where the items are marked with bullets or other symbols.
CSS provides various properties to control the appearance of these lists, such as changing the bullet style, adjusting the spacing, and customizing the list markers.
Key CSS List Properties:
1. list-style-type
The list-style-type property determines the type of marker used for list items. Common values include disc, circle, square, decimal, lower-alpha, and none.
Example:
Output:
In this example:
• The <ul> elements will have square bullets.
• The <ol> elements will have lowercase alphabetic markers (a, b, c, etc.).
2. list-style-position
The list-style-position property sets whether the list marker (bullet or number) appears inside or outside the list item’s content.
Values:
• outside (default): The marker is outside the list item’s text, with some space between the marker and the text.
• inside: The marker is inside the list item’s text, and the text will wrap underneath the marker.
Example:
<head>
<style>
li{ border: 1px solid green;}
.list-style-position-inside { list-style-position: inside;}
.list-style-position-outside { list-style-position: outside;}
</style>
</head>
<body>
<ul class=”list-style-position-inside”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class=”list-style-position-outside”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
Output:
In this example:
• li{border: 1px solid green;}: Adds a green border around each list item (<li> element), which will make it easier to see the differences between the two list-style-position settings.
• .list-style-position-insid{:list-style-position: inside;}: The list marker (bullet or number) will be placed inside the content box of the list item. This means that the marker is aligned with the text and any wrapped text will also be indented.
• .list-style-position-outside{list-style-position: outside;}: The list marker will be placed outside the content box of the list item. The marker will appear to the left of the text, and the text inside the list item will not be indented along with the marker.
3. list-style-image
The list-style-image property allows you to use an image as the list marker.
Example:
<head>
<style>
.list-style-image-example {
list-style-image: url(‘https://via.placeholder.com/15’);
}
</style>
</head>
<body>
<ul class=”list-style-image-example”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
Output:
In this example:
list-style-image: url(‘https://via.placeholder.com/15’);: This property sets a custom image as the bullet for each list item (<li>) in the unordered list (<ul>). The URL points to an image (in this case, a placeholder image of size 15×15 pixels) that will be used instead of the default bullet points.
4. list-style
The list-style property is a shorthand for setting the list-style-type, list-style-position, and list-style-image properties all at once.
Example:
<head>
<style>
.list-style-example {
list-style: circle inside url(‘https://via.placeholder.com/15’);
}
</style>
</head>
<body>
<ul class=”list-style-example”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
Output:
In this example:
list-style: circle inside url(‘https://via.placeholder.com/15’);: The list-style property is a shorthand that allows you to set multiple list-related properties at once. In this case:
• circle: Specifies the shape of the bullet point as a circle.
• inside: Positions the bullet point inside the content box of each list item (<li>), meaning the bullet will be aligned with the text.
• url(‘https://via.placeholder.com/15’): Sets a custom image as the bullet point for each list item. However, since the list-style shorthand is used, this image will override the circle bullet if supported by the browser.
5. Padding and Margin
Lists also involve padding and margin, which determine the spacing between the list items and the list itself.
Example:
<head>
<style>
.padding-margin-example {
padding: 20px 30px;
margin: 20px 10px;
background-color: lightyellow;
}
</style>
</head>
<body>
<ul class=”padding-margin-example”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
Output:
In this example:
1. padding: 20px 30px;: This applies padding inside the <ul> element. Padding is the space between the content of the element and its border.
• 20px (top and bottom): 20 pixels of padding will be applied to the top and bottom of the <ul> element.
• 30px (left and right): 30 pixels of padding will be applied to the left and right sides of the <ul> element.
2. margin: 20px 10px;: This applies margin outside the <ul> element. Margin is the space outside the element, separating it from other elements.
• 20px (top and bottom): 20 pixels of margin will be added above and below the <ul> element.
• 10px (left and right): 10 pixels of margin will be added to the left and right sides of the <ul> element.
3. background-color: lightyellow;: Sets the background color of the <ul> element to light yellow.
6. Styling List With Colors
You can style the list items with different colors for background and text.
Example:
<head>
<style>
.colorful-list {
list-style-type: disc;
}
.colorful-list li:nth-child(odd) {
background-color: lightblue;
color: navy;
}
.colorful-list li:nth-child(even) {
background-color: lightgreen;
color: darkgreen;
}
</style>
</head>
<body>
<ul class=”colorful-list”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
Output:
In this example:
• list-style-type: disc;: This sets the list item marker (bullet) to a filled circle (disc). This style applies to all list items within the unordered list (<ul>).
• .colorful-list li:nth-child(odd):This CSS rule targets the odd-numbered list items (<li>) within the .colorful-list class.
• background-color: lightblue;: Sets the background color of odd list items (1st, 3rd, etc.) to light blue.
• color: navy;: Sets the text color of odd list items to navy blue.
• .colorful-list li:nth-child(even): This CSS rule targets the even-numbered list items (<li>) within the .colorful-list class.
• background-color: lightgreen;: Sets the background color of even list items (2nd, 4th, etc.) to light green.
• color: darkgreen;: Sets the text color of even list items to dark green.
Conclusion
CSS lists allow you to style and customize the appearance of lists on your web page, making them more visually appealing and easier to read. Whether you want to change the bullet style, use images as markers, or adjust spacing, CSS gives you the tools to enhance your lists.
Course Video
YouTube Reference :
1) CSS Lists in Hindi/Urdu
Practice Scenarios
Scenario 1: Basic List Styling
Objective: Style a basic unordered list with custom bullet points and padding.
Expected Output: An unordered list with square bullet points and custom spacing.
Output:
Scenario 2: Inline List for Navigation Menu
Objective: Create a horizontal list for a navigation menu.
Expected Output: A horizontal navigation menu with styled list items.
Output:
Scenario 3: Custom Bullet Points with Images
Objective: Use custom images as bullet points in an unordered list.
Expected Output: An unordered list with images as bullet points.
Output:
Note: Replace ‘bullet.png’ with the actual path to your image.
Scenario 4: Nested Lists with Indentation
Objective: Style nested lists with different levels of indentation and bullet styles.
Expected Output: Nested unordered lists with different bullet points and proper indentation.
Output:
Scenario 5: Styled Definition List (DL, DT, DD)
Objective: Style a definition list with custom spacing, colors, and borders.
Expected Output: A definition list with styled terms and descriptions.
Output:
Scenario 6: Hover Effects on List Items
Objective: Add hover effects to list items to enhance user interaction.
Expected Output: List items that change color and background when hovered.
Output:
