CSS List Style

লিস্ট HTML-এ ডেটা ডিসপ্লে করার একটি গুরুত্বপূর্ণ উপায়। যখন আপনার কাছে একটি সাধারণ থিমের সাথে অনেক আইটেম থাকে, যেমন জুতার সাইজ বা নেভিগেশন টুলস, ডেটা প্রেজেন্ট করার সবচেয়ে ইফেক্টিভ উপায় হতে পারে একটি লিস্ট ব্যবহার করা।

ডিফল্টভাবে, HTML-এ লিস্টগুলো খুব সাদা। এখানেই CSS list-style প্রপার্টি কাজে আসে। list-style প্রপার্টি এবং এর সাব-প্রপার্টিগুলো আপনার ইউনিক ওয়েবসাইট ডিজাইনের সাথে কমপ্লিমেন্ট করার জন্য লিস্ট কাস্টোমাইজ করতে ব্যবহৃত হয়।

এই টিউটোরিয়াল উদাহরণসহ কভার করবে কীভাবে CSS-এ list-style প্রপার্টি এবং এর সাব-প্রপার্টিগুলো ব্যবহার করে লিস্ট স্টাইল করতে হয়। এটি লিস্ট এবং এর আইটেমগুলোর ব্যাকগ্রাউন্ড কালার সেট করারও কভার করবে। এই টিউটোরিয়াল পড়ার পর, আপনি CSS ব্যবহার করে লিস্ট স্টাইল করার এক্সপার্ট হয়ে যাবেন।

HTML এবং CSS Lists

লিস্টগুলো কানেক্টেড আইটেমের একটি সংখ্যা দেখাতে ব্যবহৃত হয়। HTML-এ, তিন ধরনের লিস্ট আছে যেগুলো আপনি ডেটা প্রেজেন্ট করতে ব্যবহার করতে পারেন। এগুলো হলো:

• Unordered lists (<ul>) — বুলেট পয়েন্ট ব্যবহার করে जिनके ভ্যালু মার্ক করা আইটেমের একটি লিস্ট।
• Ordered lists (<ol>) — একটি অর্ডারিং সিস্টেম ব্যবহার করে (উদাহরণস্বরূপ, সিকোয়েনশিয়াল নম্বর বা লেটার) যেগুলোর ভ্যালু মার্ক করা আইটেমের একটি লিস্ট।
• Definition lists (<dl>) — المصاحব বর্ণনা সহ আইটেমের একটি লিস্ট।

আপনি যদি HTML লিস্ট সম্পর্কে আরও জানতে আগ্রহী হন, HTML-এ লিস্ট সম্পর্কে আমাদের আর্টিকেল পড়ুন।

উপরের প্রতিটি লিস্ট টাইপ তার নিজস্ব ডিফল্ট HTML স্টাইল নিয়ে আসে। অপরদিকে, CSS অনেক প্রপার্টি অফার করে যেগুলো আপনার লিস্টগুলোক আরও aesthetically pleasing (সৌন্দর্যーボদ্ধ) এবং আপনার স্টাইল গাইডের সাথে ভালো অ্যালাইন করতে পারে।

CSS list properties আপনাকে অনুমতি দেয়:

• Ordered lists-এর জন্য আইটেম марকার পরিবর্তন করা।
• Unordered lists-এর জন্য আইটেম মার্কার পরিবর্তন করা।
• একটি ইমেজকে লিস্ট আইটেম মার্কার হিসেবে সেট করা।
• লিস্ট এবং তাদের আইটেমগুলোর ব্যাকগ্রাউন্ড কালার যোগ করা।

এই টিউটোরিয়ালে, আমরা CSS-এ লিস্ট স্টাইল করার দুটি আওভারচিং (overarching) উপায় আলোচনা করব: list-style প্রপার্টি এর ইনডিভিজুয়াল সাব-প্রপার্টিগুলোর মাধ্যমে, এবং list-style শর্টহ্যান্ড প্রপার্টি। list-style প্রপার্টির সাব-প্রপার্টিগুলো হলো:

• list-style-type
• list-style-position
• list-style-image

list-style শর্টহ্যান্ড প্রপার্টি লেখা হয়:

list-style: [list-style-type] [list-style-position] [list-style-image];

আমরা লিস্ট এবং লিস্ট আইটেমগুলোর ব্যাকগ্রাউন্ড কালার যোগ করারও আলোচনা করব।

বেসিক HTML List উদাহরণ

প্রথমে, HTML-এ একটি লিস্টের উদাহরণ দেখি। ধরুন একটি লোকাল বেকারি আমাদের কাস্টোমারদের হোম ইউজের জন্য রেসিপির একটি লিস্ট অন্তর্ভুক্ত করে একটি ওয়েব পেজ তৈরি করতে বলে।

এখানে আমাদের লিস্ট ডিফাইন করার বেসিক HTML কোড:

<ul>
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের লিস্ট নিচের মতো দেখাবে:

আমাদের লিস্টে পাঁচটি আইটেম আছে। আমরা প্রতিটি লিস্ট আইটেমকে <li> ট্যাগে এনক্লোজ করি। ("li" stands for "list item".) আমরা এই <li> ট্যাগগুলোকে একটি <ul> ট্যাগে এনক্লোজ করি। <ul> ট্যাগ একটি unordered list আইডেন্টিফাই করে।

যেহেতু এটি একটি unordered list, আমাদের ওয়েব ব্রাউজার লিস্টের প্রতিটি আইটেমের আগে একটি বুলেট পয়েন্ট রাখে। (যদি এটি একটি ordered list হত, আমাদের ওয়েব ব্রাউজার সাধারণত একটি নম্বর বা লেটার প্রতিটি আইটেমের আগে রাখত।)

এখন, আসুন এক্সপ্লোর করি কীভাবে list-style প্রপার্টি ব্যবহার করে একটি লিস্ট স্টাইল করা যায়।

List Item Markers

list-style-type প্রপার্টি একটি লিস্টে আইটেমের জন্য ব্যবহৃত মার্কার টাইপ স্পেসিফাই করতে ব্যবহৃত হয়।

Unordered List Item Markers

ধরুন বেকারি আমাদের তাদের লিস্টটি সার্কেল বুলেট পয়েন্ট বা স্কোয়ার বুলেট পয়েন্ট দিয়ে কী দেখাবে সেটা দেখাতে চায়। আমরা বেকারির জন্য এই ডিজাইনগুলো তৈরি করতে নিচের কোড ব্যবহার করতে পারি:

styles.css
li.circlebulletPoint { list-style-type: circle; }
li.squarebulletPoint { list-style-type: square; }

index.html
<ul>
  <li class="circlebulletPoint">Butterfly Cakes</li>
  <li class="squarebulletPoint">Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের কোড রিটার্ন করে:

আপনি দেখতে পাচ্ছেন, আমাদের প্রথম লিস্ট আইটেম সার্কেল বুলেট পয়েন্ট মার্কার স্টাইল ব্যবহার করছে। আমরা প্রথম লিস্ট আইটেমে "circlebulletPoint" ক্লাস ভ্যালু অ্যাসাইন করে (অতএব সেই ভ্যালুর correspondiente style) এটি অর্জন করেছি। দ্বিতীয় লিস্ট আইটেমে "squarebulletPoint" ক্লাস ভ্যালু অ্যাসাইন করেছি, তাই ওয়েব ব্রাউজার সেই আইটেমের আগে একটি স্কোয়ার বুলেট পয়েন্ট দেখাচ্ছে।

অন্যান্য list-style-types যেগুলো একটি লিস্টে অ্যাপ্লাই করা যায়:

• disc
• circle
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• none

আমরা অর্ডার্ড লিস্টে প্রযোজ্য কিছুই পরবর্তী সেকশনে আলোচনা করব।

Ordered List Item Markers

Ordered lists-এর নিজস্ব আইটেম মার্কার স্টাইল আছে।

ধরুন আমরা বেকারির রেসিপিগুলো একটি অর্ডার্ড লিস্টে ডিসপ্লে করতে চাই। আমরা দেখতে চাই আমাদের লিস্টটি কী দেখাবে যদি এর অর্ডার একটি लोয়ারকেস অ্যালফাবেটিক্যাল লেটার দিয়ে মার্ক করা হয় প্রতিটি আইটেমের আগে, এবং কী দেখাবে যদি একটি আপারকেস রোমান নিউমারেল দিয়ে মার্ক করা হয় প্রতিটি আইটেমের আগে। আমরা এই টাস্ক অর্জন করতে নিচের কোড ব্যবহার করতে পারি:

styles.css
li.alpha { list-style-type: lower-alpha; }
li.roman { list-style-type: upper-roman; }

index.html
<ol>
  <li class="alpha">Butterfly Cakes</li>
  <li class="roman">Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ol>

আমাদের কোড রিটার্ন করে:

এই উদাহরণে, আমরা unordered list-এ পরিবর্তে একটি ordered list (<ol>) ব্যবহার করেছি। এটি আমাদের লিস্টকে নম্বর (বা লেটার, ইত্যাদি) দিয়ে অর্ডার করতে দেয়। তারপর, আমরা আমাদের লিস্টের প্রথম আইটেমকে একটি लोয়ারকেস অ্যালফাবেটিক্যাল লেটার দিয়ে এবং দ্বিতীয় আইটেমকে একটি আপারকেস রোমান নিউমারেল দিয়ে মার্ক করেছি।

ডিফল্ট List Item Marker Styling রিমুভ করা

আমাদের কোডে তিনটি CSS প্রপার্টি আছে যেগুলো আমরা একটি লিস্ট থেকে ডিফল্ট স্টাইলিং-এর দিকগুলো রিমুভ করতে ব্যবহার করতে পারি: list-style-type, margin, এবং padding।

list-style-type কে None সেট করা

আমরা যদি লিস্ট আইটেমের আগে কোনো ধরনের বুলেট পয়েন্ট বা ordinal indicator (নম্বর বা লেটার പോলে) না চাই, তবে list-style-type প্রপার্টিকে none সেট করতে পারি। একটি লিস্টে কোনো বুলেট পয়েন্ট বা ordinal indicators রিমুভ করতে এই প্রপার্টি ব্যবহার করার একটি উদাহরণ:

styles.css
ul { list-style-type: none; }

index.html
<ul>
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের কোড রিটার্ন করে:

আমাদের লিস্ট এখনও একটি লিস্ট হিসেবে স্ট্রাকচারড, কিন্তু ওয়েব পেজে ডিসপ্লে হলে, লিস্টের আইটেমগুলোর মার্কার নেই।

Marker Position

list-style-position প্রপার্টি একটি লিস্টে লিস্ট আইটেম মার্কারগুলোর পজিশন স্পেসিফাই করতে ব্যবহৃত হয়।

লিস্টে আইটেম মার্কারগুলো দেখাতে পারে দুটি পজিশনে: inside এবং outside। যদি লিস্ট মার্কারগুলো লিস্টের ভিতরে দেখায়, টেক্সট সরাসরি আইটেম মার্কারদের পাশে দেখাবে; যদি লিস্ট মার্কারগুলো লিস্টের বাইরে দেখায়, লিস্ট মার্কার들과 লিস্টের টেক্সট আইটেমগুলোর মধ্যে একটি গ্যাপ থাকবে।

এই দুটি স্টেটে list-style-position কীভাবে অ্যাপ্লাই করা যায় সেটা দেখানোর দুটি উদাহরণ CSS রুল:

ul.a { list-style-position: outside; }
ul.b { list-style-position: inside; }

আমাদের প্রথম লিস্টে, আমরা list-style-position: outside style ব্যবহার করেছি। এটি লিস্টগুলোর জন্য ডিফল্ট স্টাইল। যেহেতু এটি ডিফল্ট, যদি আমরা এই বা অন্য কোনো list-style-position আমাদের কোড ব্লকে স্পেসিফাই না করি, ব্রাউজার এই পজিশনিং-কে ডিফল্ট হিসেবে ব্যবহার করবে লিস্ট আইটেম মার্কারগুলোর জন্য। আমাদের বেকারি লিস্টের কোড যা এই স্টাইল ব্যবহার করে:

<ul class="a">
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

কোড রিটার্ন করে:

এই স্টাইলে, লিস্ট আইটেম মার্কারগুলো (এই কেসে, বুলেট পয়েন্টস) আমাদের লিস্ট আইটেমের বাইরে দেখায়।

আমাদের দ্বিতীয় লিস্টে, আমরা আমাদের লিস্ট আইটেম Маркারদের পজিশন "inside" হিসেবে স্পেসিফাই করেছি। এই স্টাইল ব্যবহার করে আমাদের বেকারি লিস্টের কোড:

<ul class="b">
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

কোড রিটার্ন করে:

বোঝা কঠিন কিন্তু আমাদের লিস্ট আইটেম Маркারদের পজিশন এখন লিস্ট আইটেমের বাইরে।

Image Marker

লিস্টগুলো প্রায়শই কাস্টোম মার্কার ইমেজ সহ ব্যবহার করে। আপনি যদি একটি লিস্ট আইটেমের মার্কারকে একটি ইমেজ সেট করতে চান, তবে আপনি list-style-image CSS প্রপার্টি ব্যবহার করতে পারেন।

ধরুন বেকারি আমাদের তাদের লিস্টে লিস্ট আইটেম মার্কারগুলোকে কেকের ইমেজে পরিবর্তন করতে বলে (বুলেট পয়েন্ট, নম্বর, ইত্যাদির বদলে)। আমরা এই টাস্ক অর্জন করতে নিচের কোড ব্যবহার করতে পারি:

styles.css
ul { list-style-image: url("https://img.icons8.com/small/16/000000/cake.png"); }

index.html
<ul>
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের কোড রিটার্ন করে:

আপনি দেখতে পাচ্ছেন, ডিফল্ট লিস্ট আইটেম মার্কার ব্যবহার করার বদলে, আমরা আমাদের নিজস্ব ব্যবহার করেছি। এই কেসে, আমাদের লিস্ট আইটেম মার্কার হলো একটি কেকের ইমেজ।

List Style Shorthand Property

আমরা list-style প্রপার্টির সাব-প্রপার্টিগুলো আলোচনা করেছি। এগুলো আমাদের লিস্টে ইনডিভিজুয়াল স্টাইল অ্যাপ্লাই করার অনুমতি দিয়েছে।

তবে, লিস্ট স্টাইল করার একটি আরও ইফিশিয়েন্ট উপায় আছে। প্রতিটি ইনডিভিজুয়াল সাবপ্রপার্টি ব্যবহার করে লিস্ট স্টাইল করার বদলে, আমরা list-style শর্টহ্যান্ড প্রপার্টি ব্যবহার করতে পারি। list-style শর্টহ্যান্ড প্রপার্টির সিনট্যাক্স:

ul {
  list-style: [list-style-type] [list-style-position] [list-style-image];

উপরে স্পেসিফাই করা ভ্যালুদের অর্ডার হলো list-style শর্টহ্যান্ড প্রপার্টির সাথে ব্যবহার করার আপনার যেই অর্ডার দরকার। আপনি যদি তিনটি সাব-প্রপার্টির যেকোনো একটোর জন্য ভ্যালু স্পেসিফাই না করেন, তবে ওয়েব ব্রাউজার সেই সাবপ্রপার্টির ডিফল্ট ভ্যালু ব্যবহার করবে।

ধরুন আমরা আমাদের বেকড গুডস রেসিপির লিস্টকে একটি কেক ইমেজ দিয়ে স্টাইল করতে চাই এবং প্রতিটি লিস্ট আইটেম মার্কারকে আমাদের লিস্টের বাইরে মুভ করতে চাই। আমরা এই কোড ব্যবহার করে এটি করতে পারি:

styles.css
ul {
  list-style: outside url('https://img.icons8.com/small/16/000000/cake.png');
}

index.html
<ul>
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের কোড রিটার্ন করে:

আমাদের লিস্ট এখন প্রতিটি লিস্ট আইটেম মার্কার জন্য কেক ইমেজ ব্যবহার করছে। অতিরিক্তভাবে, প্রতিটি লিস্ট আইটেম মার্কার আমাদের লিস্টের বাইরে স্টাইল করা হয়েছে।

CSS List Colors

যখন আপনি একটি লিস্ট ডিজাইন করছেন, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি লিস্টকে ব্যাকগ্রাউন্ড কালারসহ ডিসপ্লে করতে চান।

ধরুন বেকারি আমাদের পুরো লিস্টের ব্যাকগ্রাউন্ড কালার লাইট ব্লু সেট করতে চায় এবং লিস্টের প্রতিটি আইটেমের জন্য পিংক ব্যাকগ্রাউন্ড কালার ব্যবহার করতে চায়। আমরা CSS background প্রপার্টি ব্যবহার করে এই টাস্ক অর্জন করতে পারি, এইভাবে:

ul { background: lightblue; padding: 10px; }
ul li { background: pink; margin: 10px; }

আমাদের কোড রিটার্ন করে:

<ul>
  <li>Butterfly Cakes</li>
  <li>Chocolate Traybake</li>
  <li>Lemon Pound Cake</li>
  <li>Peanut Butter Flapjacks</li>
  <li>Chocolate Muffins</li>
</ul>

আমাদের কোডে, আমরা <ul> এলিমেন্টে background প্রপার্টি ব্যবহার করে একটি লাইট ব্লু ব্যাকগ্রাউন্ড কালার অ্যাপ্লাই করেছি, যা একটি unordered list তৈরি করে। আমরা <ul> এলিমেন্টকে 10px padding দিয়েছি padding প্রপার্টি ব্যবহার করে।

আমরা প্রতিটি লিস্ট আইটেমের চারপাশে একটি পিংক ব্যাকগ্রাউন্ড এবং 10px মার্জিনও তৈরি করেছি।

এটি আমরা "ul li" সিলেক্টরে আমাদের স্টাইলগুলো অন্তর্ভুক্ত করে অর্জন করেছি, जैसा আপনি উপরে দেখতে পাচ্ছেন। এই সিলেক্টর বলে যে পিংক ব্যাকগ্রাউন্ড এবং 10px মার্জিন সকল <li> ট্যাগে অ্যাপ্লাই করা উচিত যেগুলো একটি <ul> ট্যাগে এনক্লোজ করা আছে।

উপসংহার

যখন আপনি HTML লিস্টের সাথে কাজ করছেন, আপনি CSS ব্যবহার করে সেই লিস্টগুলোর কাস্টোম স্টাইল অ্যাপ্লাই করতে পারেন সেগুলোকে আরও aesthetically pleasing (সৌন্দর্যーボদ্ধ) করার জন্য। list-style প্রপার্টি CSS-এ একটি লিস্টে স্টাইল অ্যাপ্লাই করতে (অথবা স্টাইল রিমুভ করতে) ব্যবহৃত হয়।

এই টিউটোরিয়াল উদাহরণসহ আলোচনা করেছি কীভাবে CSS list-style প্রপার্টি এবং এর তিনটি সাব-প্রপার্টি ব্যবহার করতে হয়। আমরা লিস্ট এবং এর ভিতরের আইটেমগুলোর জন্য ব্যাকগ্রাউন্ড কালার সেট করারও আলোচনা করেছি।

এখন আপনার কাছে CSS-এ লিস্ট স্টাইল করার মতো এক্সপার্টের মতো শুরু করার জ্ঞান আছে!