CSS দিয়ে আনঅর্ডারড ও অর্ডারড লিস্ট ফরম্যাট করা

দুই ধরণের লিস্টকে একসাথে স্টাইল করতে list-style-type, list-style-image, list-style-position প্রোপার্টিগুলো ব্যবহার করা হয়।

উদাহরণ ১: আনঅর্ডারড লিস্ট (ul) — স্কয়ার মার্কার

<!DOCTYPE html>
<html>
<head>
<style> ul { list-style-type: square; } </style>
</head>
<body>
<h2>Teams</h2>
<ul>
  <li>India</li> <li>Australia</li> <li>England</li>
  <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li>
</ul>
</body>
</html>

উদাহরণ ২: অর্ডারড লিস্ট (ol) — আপার-রোমান নম্বর

<!DOCTYPE html>
<html>
<head>
<style> ol { list-style-type: upper-roman; } </style>
</head>
<body>
<h2>Teams</h2>
<ol>
  <li>India</li> <li>Australia</li> <li>England</li>
  <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li>
</ol>
</body>
</html>

উদাহরণ ৩: উভয় লিস্টে ইমেজ মার্কার

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
ol.demo2 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
  <li>India - Qualified for WordCup</li>
  <li>Australia - Qualified for WordCup</li>
  <li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
  <li>Virat Kohli</li> <li>David Warner</li> <li>Steve Smith</li>
</ol>
</body>
</html>

টিপ: list-style: square inside url('icon.png'); শর্টহ্যান্ডে সব একসাথে লিখা যায়।