CSS Lists:
The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized orderly or unorder way, which helps to make a clean webpage. It can be used to arrange the huge with a variety of content as they are flexible and easy to manage. The default style for the list is borderless.
The list can be categorized into 2types
⇒Unordered List: In unordered lists, the list items are marked with bullets i.e. small black circles by default.
⇒Ordered List:In ordered lists, the list items are marked with numbers and an alphabet.
Syntax:
list-style-type:value;
The following value can be used:
*circle
*decimal, eg :1,2,3, etc
*decimal-leading-zeroes , eg :01,02,03,04,etc
*lower-roman
*upper-roman
*lower-alpha, eg: a,b,c, etc
*upper-alpha, eg: A, B, C, etc
*square
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
Gocources
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
Output:
Gocources
Unorder list
◾one
◼ two
◾three
● one
● two
● three
Order list
a. one
b. two
c. three
1. one
2. two
3. three
