CSS Properties: How to set the different type list style
Solution:
HTML Code:
<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set the different type list style</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
ol.w3r{ /* Selects ordered lists with class 'w3r' */
list-style-type: decimal-leading-zero; /* Sets the list-style type to decimal with leading zeros */
}
ol.w3r1{ /* Selects ordered lists with class 'w3r1' */
list-style-type: upper-alpha; /* Sets the list-style type to uppercase alphabetic characters */
}
ol.w3r2 { /* Selects ordered lists with class 'w3r2' */
list-style-type: lower-roman; /* Sets the list-style type to lowercase Roman numerals */
}
ul.w3r3 { /* Selects unordered lists with class 'w3r3' */
list-style-type: square; /* Sets the list-style type to square bullets */
}
ul.w3r4 { /* Selects unordered lists with class 'w3r4' */
list-style-type: circle; /* Sets the list-style type to circle bullets */
}
ul.w3r5 { /* Selects unordered lists with class 'w3r5' */
list-style-type: disc; /* Sets the list-style type to disc bullets */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>Ordered lists</p><!-- Paragraph indicating ordered lists -->
<ol class="w3r"><!-- Ordered list with class 'w3r' -->
<li>HTML</li><!-- List item -->
<li>CSS</li><!-- List item -->
<li>Java</li><!-- List item -->
</ol><!-- Ends the ordered list -->
<ol class="w3r1"><!-- Ordered list with class 'w3r1' -->
<li>HTML5</li><!-- List item -->
<li>CSS3</li><!-- List item -->
<li>JavaScript</li><!-- List item -->
</ol><!-- Ends the ordered list -->
<ol class="w3r2"><!-- Ordered list with class 'w3r2' -->
<li>SQL</li><!-- List item -->
<li>MySQL</li><!-- List item -->
<li>PostgreSQL</li><!-- List item -->
</ol><!-- Ends the ordered list -->
<p>Unordered lists</p><!-- Paragraph indicating unordered lists -->
<ul class="w3r3"><!-- Unordered list with class 'w3r3' -->
<li>XML</li><!-- List item -->
<li>JSON</li><!-- List item -->
<li>Ajax</li><!-- List item -->
</ul><!-- Ends the unordered list -->
<ul class="w3r4"><!-- Unordered list with class 'w3r4' -->
<li>MongoDB</li><!-- List item -->
<li>Oracle</li><!-- List item -->
<li>Redis</li><!-- List item -->
</ul><!-- Ends the unordered list -->
<ul class="w3r5"><!-- Unordered list with class 'w3r5' -->
<li>NoSQL</li><!-- List item -->
<li>SQLite</li><!-- List item -->
<li>Python</li><!-- List item -->
</ul><!-- Ends the unordered list -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->
Explanation:
- This HTML document demonstrates how to set different types of list styles using CSS.
- CSS comments are added to explain each section of the code.
- Different classes are defined for ordered lists (ol) and unordered lists (ul) to apply different list styles.
- list-style-type property is used to specify the type of list marker for each list class.
- Ordered lists:
- ol.w3r has decimal-leading-zero style.
- ol.w3r1 has upper-alpha (uppercase alphabetic) style.
- ol.w3r2 has lower-roman (lowercase Roman numerals) style.
- Unordered lists:
- ul.w3r3 has square bullet style.
- ul.w3r4 has circle bullet style.
- ul.w3r5 has disc bullet style.
Live Demo:
See the Pen list-style-type-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.