CSS lists


There are two type of lists in CSS
1.Ordered lists
2.Unordered lists.
    We can make with different items like:
  • Circle
  • Square
  • Roman Numbers
  • Alphabets

Ordered lists in CSS

<!DOCTYPE html>
<html>
<head>
<style>
ul.roman{
list-style-type:lower-roman;
}
ul.roman1{
list-style-type:upper-roman;
}
ul.alphabet{
list-style-type:upper-alpha;
}
ul.alphabet1{
list-style-type:lower-alpha;
}
</style>
<title>
ORDERED LISTS IN CSS
</title>
</head>
<body>
<ul class="roman">
<li>INDIA</li>
<li>USA</li>
</ul>
<ul class="roman1">
<li>INDIA</li>
<li>USA</li>
</ul>
<ul class="alphabet">
<li>KOLKATA</li>
<li>BANGALORE</li>
</ul>
<ul class="alphabet1">
<li>KOLKATA</li>
<li>BANGALORE</li>
</ul>
</body>
</html>

Output:

  • INDIA
  • USA
  • INDIA
  • USA
  • KOLKATA
  • BANGALORE
  • KOLKATA
  • BANGALORE

Unordered lists in CSS

<!DOCTYPE html>
<html>
<head>
<style>
ul.roman{
list-style-type:circle;
}
ul.alphabet{
list-style-type:square;
}
</style>
<title>
ORDERED LISTS IN CSS
</title>
</head>
<body>
<ul class="roman">
<li>INDIA</li>
<li>USA</li>
</ul>
<ul class="alphabet">
<li>KOLKATA</li>
<li>BANGALORE</li>
</ul>
</body>
</html>

Output:

  • INDIA
  • USA
  • KOLKATA
  • BANGALORE