w3resource

CSS Properties: How to set the different type list style

Go to Exercise page

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 solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.