কয়েকটি বাদে প্রায় প্রত্যেকটি এইচটিএমএল এলিমেন্টে id এট্রিবিউট ব্যবহার করা যায়। id এট্রিবিউটের মান ইচ্ছেমত দিতে পারেন। সহজ কথায় id এর মান হচ্ছে এলিমেন্ট টির একটা নাম। এই নাম ধরে সিএসএস এ এলিমেন্ট টিকে সিলেক্ট করা হয় এবং স্টাইলিং করা হয়।

যেমন

<!DOCTYPE html><html><head><style>#demo_head{color:#f00;text-transform : uppercase;}#demo_para{text-align:center;color:maroon;}</style></head><body> <h1 id="demo_head">Jitubd demo heading</h1> <p id="demo_para">demo content goes here.</p> </body></html>

প্রদর্শন:

JITUBD DEMO HEADING

demo content goes here.

text-transform প্রোপার্টি টির ৫টি মান হেতে পারে।

uppercase দিলে ঐ এলিমেন্টের ভিতরে থাকা সব লেখা বড় হাতে অক্ষরে দেখাবে। যেমন আমি দিয়েছি।

none দিলে যেমন এইচটিএমএল এ আছে সেরকমই দেখাবে। এটা বা্ই ডিফল্ট থাকে।

inherit দিলে প্যারেন্ট এলিমেন্টে যদি text-transform থাকে সেটার টাই প্রয়োগ হবে যদি প্যারেন্টে এই প্রোপার্টিজ না থাকে তাহলে ডিফল্ট টা পাবে মানে none.

lowercase দিলে সব লেখা ছোট হাতে অক্ষরে গয়ে যাবে।

capitalize দিলে প্রথম অক্ষরটি বড় হাতের দেখাবে (সব শব্দের জন্য)

** id সিলেক্ট করতে হ্যাশ (#) চিহ্ন ব্যবহার করতে হয়। যেমন আমি করেছি। দেখুন যে এলিমেন্টের আইডিতে সিএসএস লিখেছি শুধু সেটাতেই প্রভাব পরেছে। এভাবে পুরো এইচটিএমএল ডকুমেন্টে আপনি যত ইচ্ছা আইডি ব্যবহার করতে পারেন এবং প্রত্যেকটি আইডি ধরে ধরে ঐ এলিমেন্টের জন্য আলাদা আলাদা স্টাইল করতে পারেন।

** id ইউনিক রাখতে হবে মানে কখনই দুটি এলিমেন্টের আইডি একই দিবেন না। যদি ১০০০ এলিমেন্টের আইডি দেন তাহলে প্রতিটির নাম ভিন্ন হতে হবে। যেকোন নাম রাখা যাবে তবে আইডর নাম প্রাসঙ্গিক রাখা ভাল যেমন উপরের উদাহরনে আমি দিয়েছি।

কখন id ব্যবহার করবেন

=======================

ধরুন আপনার সাইটের body এলিমেন্টের ভিতর ১০ টি এইচটিএমএল এলিমেন্ট আছে এবং প্রত্যেকটির স্টাইল আলাদা দিতে চান, কারো সাথে কারো মিল হবেনা। তখনি প্রতিটি এলিমেন্টে আইডি দিতে হবে। আর যখন একাধিক এলিমেন্টে কমন স্টাইল লাগবে তখন ক্লাস।