CSS দিয়ে লিস্ট স্টাইলিং — মার্কার টাইপ, ইমেজ, পজিশন

CSS-এ লিস্ট (অর্ডারড <ol> এবং আনঅর্ডারড <ul>) স্টাইল করার জন্য তিনটি মূল প্রোপার্টি রয়েছে:

• list-style-type — মার্কার টাইপ (ডিস্ক, সার্কেল, স্কয়ার, রোমান, লেটার ইত্যাদি)
• list-style-image — কাস্টম ইমেজ মার্কার হিসেবে ব্যবহার
• list-style-position — মার্কারের পজিশন (outside ডিফল্ট, inside)

শর্টহ্যান্ড: list-style: type position image;

list-style-type উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: upper-roman; }
</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>

list-style-image উদাহরণ

<!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-position উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-position: outside; }
ul.demo2 { list-style-position: inside; }
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
  <li>India</li> <li>Australia</li> <li>England</li>
  <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
  <li>India</li> <li>Australia</li> <li>England</li>
  <li>West Indies</li> <li>South Africa</li> <li>Srilanka</li>
</ul>
</body>
</html>