Lists in CSS are used to format and organize content on a webpage in a structured manner. They are flexible and easy to manage, making them useful for organizing large amounts of information. By default, lists are borderless and can be styled using various CSS properties. Lists can be categorized into two main types:
1. Unordered List: Items are marked with bullets (default is tiny black circles).
2. Ordered List: Items are marked with numbers or letters.
CSS provides several properties to control the appearance of lists:
1. list-style-type: Specifies the appearance of the list item marker (e.g., disc, character, or custom counter style).
2. list-style-image: Allows you to specify an image as the list item marker.
3. list-style-position: Describes the position of the marker box relative to the main block box.
4. list-style: A shorthand property to set all the list properties in one declaration.
This property allows you to change the default marker of the list items. For unordered lists, the default marker is a round bullet (•), while ordered lists use Arabic numerals (1, 2, 3, etc.). You can change these to various other types, such as squares, circles, Roman numerals, Latin letters, and more.
list-style-type: value;
• circle
• decimal (e.g., 1, 2, 3, etc.)
• decimal-leading-zero (e.g., 01, 02, 03, etc.)
• lower-roman (e.g., i, ii, iii, etc.)
• upper-roman (e.g., I, II, III, etc.)
• lower-alpha (e.g., a, b, c, etc.)
• upper-alpha (e.g., A, B, C, etc.)
• square
• none (removes the marker)
<!DOCTYPE html>
<html>
<head>
<title>CSS List Styles Example</title>
</head>
<body>
<!-- Unordered List with Circle Markers -->
<ul style="list-style-type: circle; margin: 10px;">
<li style="margin-bottom: 5px;">Unordered List - Circle
Marker</li>
<li style="margin-bottom: 5px;">Item 1</li>
<li style="margin-bottom: 5px;">Item 2</li>
<li style="margin-bottom: 5px;">Item 3</li>
</ul><br>
<!-- Ordered List with Upper Roman Markers -->
<ol style="list-style-type: upper-roman; margin: 10px;">
<li style="margin-bottom: 5px;">Ordered List - Upper Roman
Marker</li>
<li style="margin-bottom: 5px;">Item I</li>
<li style="margin-bottom: 5px;">Item II</li>
<li style="margin-bottom: 5px;">Item III</li>
</ol><br>
<!-- Unordered List with Custom Image Markers -->
<ul style="list-style-image: url('https://via.placeholder.com/15');
margin: 10px;">
<li style="margin-bottom: 5px;">Unordered List - Custom
Image Marker</li>
<li style="margin-bottom: 5px;">Item 1</li>
<li style="margin-bottom: 5px;">Item 2</li>
<li style="margin-bottom: 5px;">Item 3</li>
</ul><br>
<!-- Ordered List with Lower Alpha Markers -->
<ol style="list-style-type: lower-alpha; margin: 10px;">
<li style="margin-bottom: 5px;">Ordered List - Lower Alpha
Marker</li>
<li style="margin-bottom: 5px;">Item a</li>
<li style="margin-bottom: 5px;">Item b</li>
<li style="margin-bottom: 5px;">Item c</li>
</ol><br>
<!-- Unordered List with None Markers -->
<ul style="list-style-type: none; margin: 10px;">
<li style="margin-bottom: 5px;">Unordered List - No
Marker</li>
<li style="margin-bottom: 5px;">Item 1</li>
<li style="margin-bottom: 5px;">Item 2</li>
<li style="margin-bottom: 5px;">Item 3</li>
</ul><br>
<!-- Combined List with different properties -->
<ul style="list-style: square inside; list-style-image: none; margin:
10px;">
<li style="margin-bottom: 5px;">Combined List - Square
Marker Inside</li>
<li style="margin-bottom: 5px;">Item 1</li>
<li style="margin-bottom: 5px;">Item 2</li>
<li style="margin-bottom: 5px;">Item 3</li>
</ul>
</body>
</html>