সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো List নিয়ে। লিস্ট অর্থ তালিকা। এইচটিএমএল এ ৩ ধরনের লিস্ট রয়েছে। যেমনঃ

১. Ordered list,
২. Unordered list এবং
৩. Definition list.

Ordered list গুলোর ক্রম হচ্ছে সংখ্যাবাচক যেমনঃ 1, 2, 3 বা এ্যালফাবেটিক যেমনঃ A, B, C বা a, b, c বা রোমান স্টাইল যেমনঃ i, ii, iii বা I, II, III. Unordered list এর স্টাইল গুলো যেমনঃ circle, disc, square.

Ordered list এবং Unordered list এর বাই ডিফল্ট লিস্ট স্টাইল থাকলেও Definition list এর ডিফল্ট কোন লিস্ট স্টাইল নেই। যাহোক, Ordered list এবং Unordered list এর জন্য উপরের মত লিস্ট স্টাইল দিতে এইচটিএমএল লিস্ট ট্যাগের মধ্যে শুধু মাত্র type=”value” অ্যাট্রিবিউট এবং value তে উপরের যেকোনো ভ্যালু ব্যবহার করলেই সে অনুযায়ী লিস্ট প্রদর্শন করবে। এছাড়াও আপনি চাইলে সিএসএস দিয়েও এসব লিস্ট স্টাইল এমনকি কাস্টম ইমেজ লিস্ট স্টাইলও ব্যবহার করতে পারবেন। সিএসএস দিয়ে লিস্ট স্টাইল পেলে হলে আপনাকে সিএসএস লিস্ট স্টাইল প্রোপার্টি list-style-type:value ব্যবহার করতে হবে। value তে Ordered list পেতে চাইলে সংখ্যাবাচক স্টাইল ভ্যালু decimal, এ্যালফাবেটিক ভ্যালু upper-alpha বা lower-alpha, রোমান স্টাইল চাইলে upper-roman বা lower-roman ব্যবহার করতে হবে। Unordered list পেতে চাইলে স্টাইল গুলো যেমনঃ circle, disc, square ব্যবহার করতে হবে।

আর যদি কাস্টম ইমেজ লিস্ট স্টাইল পেতে চান তবে সিএসএস প্রোপার্টি list-style-image:url() ব্যবহার করতে হবে।

Ordered list:

সিএসএস দিয়ে Ordered লিস্ট স্টাইল পেলে হলে আপনাকে সিএসএস লিস্ট স্টাইল প্রোপার্টি list-style-type: value ব্যবহার করতে হবে। value তে Ordered list সংখ্যাবাচক স্টাইল ভ্যালু decimal, এ্যালফাবেটিক ভ্যালু upper-alpha বা lower-alpha, রোমান স্টাইল চাইলে upper-roman বা lower-roman ব্যবহার করতে হবে। এবার একে একে লিস্ট আইটেম স্টাইল গুলো অ্যাপ্লাই করি নিচের মতঃ

[html]

Ordered List Style Decimal “1” Order

1. List item A
2. List item B
3. List item C

Ordered List Style Capital Letter “A” Order

1. List item A
2. List item B
3. List item C

Ordered List Style Small Letter “a” Order

1. List item A
2. List item B
3. List item C

Ordered List Style Capital Roman “I” Order

1. List item A
2. List item B
3. List item C

Ordered List Style Small Roman “i” Order

1. List item A
2. List item B
3. List item C

[/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন cssolist বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।