CSS এ ওয়েব পেজের কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি জনপ্রিয় পদ্ধতি আইডি সিলেক্টর । একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।
যেমন <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. information. </p>এর জন্য css কোড
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
আইডি সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id="post1">। এখানে post1 আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
[sourcecode language=”css”]
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
[/sourcecode]
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
<p id="post1"> এর মাধ্যমে একটি প্যারাগ্রাফের জন্য post1 নামে একটি আইডি নির্ধারণ করা হয়েছে।
<p id="post2"> এর মাধ্যমে অপর একটি প্যারাগ্রাফের জন্য post2 নামে একটি আইডি নির্ধারণ করা হয়েছে।
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post1 নামে নির্ধারিত আইডিযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post2 নামে নির্ধারিত আইডিযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
সি এস এস এর সকল বাংলা টিউটোরিয়াল
- ১.সিএসএস কি?
- ২.ট্যাগ সিলেক্টর
- ৩.ক্লাস সিলেক্টর
- ৪.আইডিসিলেক্টর
- ৫.কোড লেখার পদ্ধতি
- ৬.ইমবেডেড স্টাইল শীট
- ৭.এক্সটার্নাল স্টাইল শীট
- ৮.ইন-লাইন স্টাইল শীট
- ৯.ব্যাকগ্রাউন্ড
- ১০.টেক্সট কালার
- ১১.টেক্সট এলাইনমেন্ট
- ১২.টেক্সট ডেকরেশন
- ১৩.টেক্সট ট্রান্সফরমেশন
- ১৪.ফন্ট ফ্যামিলি
- ১৫.ফন্ট সাইজ
- ১৬.ফন্ট ভেরিয়েন্ট
- ১৭.ফন্ট ওয়েট
- ১৮.লিংক
- ১৯.অর্ডার লিস্ট
- ২০.আনঅর্ডার লিস্ট
- ২১.লিস্টে ইমেজের ব্যবহার
- ২২.টেবিল এবং টেবিল বর্ডার
- ২৩.টেবিল ওয়াইডথ এন্ড হাইট
- ২৪.টেবিল টেক্সট এলাইনমেন্ট
- ২৫.টেবিল কালার
- ২৬.বর্ডার এবং বর্ডার স্টাইল
- ২৭.বর্ডার ওয়াইডথ
- ২৮.বর্ডার কালার
- ২৯.পৃথক বর্ডার
- ৩০.মার্জিন
- ৩১প্যাডিং
- ৩২.আউট লাইন এবং আউট লাইন স্টাইল
- ৩৩.আউট লাইন ওয়াইডথ
- ৩৪.আউট লাইন কালার
- ৩৫.বক্স মডেল
- ৩৬.গ্রুপিং সিলেক্টর
- ৩৭.নেস্টিং সিলেক্টর
- ৩৮.ডাইমেনশন
- ৩৯.প্রদর্শণ পদ্ধতি
- ৪০.ডিসপ্লে ইন লাইন
- ৪১.ডিসপ্লে ব্লক
- ৪২.ভিজিবিলিটি
- ৪৩.ভিজিবিলিটি হিডেন
- ৪৪.ভিজিবিলিটি কলাপস্
- ৪৫.অবস্থান
- ৪৬.পজিশন স্ট্যাটিক
- ৪৭.পজিশন ফিক্সড
- ৪৮.পজিশন রিলেটিভ
- ৪৯.পজিশন এবসলিউট
- ৫০.ওভার ফ্লো
- ৫১.ওভার ফ্লো ভিজিবল (
- ৫২.ওভার ফ্লো হিডেন
- ৫৩.ওভার ফ্লো অটো
- ৫৪.ওভার ফ্লো স্ক্রল
- ৫৫.ক্লিপ
- ৫৬.অটো ক্লিপ এবং রেকটেংগুলার ক্লিপ
- ৫৭.জেড ইনডেক্স
- ৫৮.ফ্লোটিং
- ৫৯.বাম দিকে ফ্লট
- ৬০ডান দিকে ফ্লট
- ৬১.ফ্লটিং দ্বারা প্যারাগ্রাফে ইমেজের অবস্থান নির্দেশ
- ৬২.এলাইন
- ৬৩.মার্জিন প্রোপার্টি দ্বারা সেন্টার এলাইন
- ৬৪.পজিশন প্রপার্টি দ্বারা লেফট বা রাইট এলাইন
- ৬৫.ফ্লট প্রোপার্টি দ্বারা লেফট বা রাইট এলাইন
- ৬৬.কার্সার ইফেক্ট
- ৬৭.চাইল্ড সিলেক্টর
- ৬৮.সিউডো ক্লাস
- ৬৯.এংকর সিউডো ক্লাস
- ৭০.ফাস্ট চাইল্ড সিউডো ক্লাস
- ৭১.ল্যাঙ্গুয়েজ সিউডো ক্লাস
- ৭২.শিরোনামে সিউডো ক্লাসের ব্যবহার
- ৭৩.সাধারণ শিরোনামে সিউডো ক্লাসের ব্যবহার
- ৭৪.সিউডো ইলিমেন্ট
- ৭৫.প্রথম অক্ষর সিউডো ইলিমেন্ট
- ৭৬.প্রথম লাইন সিউডো ইলিমেন্ট-
- ৭৭.বিফোর সিউডো ইলিমেন্ট
- ৭৮.আফটার সিউডো ইলিমেন্ট
- ৮০.ছবির অপাসিটি
- ৮১.ছবি ভাগ করে লোড
- ৮২.মিডিয়া টাইপ
- ৮৩.নেভিগেশন
- ৮৪.নেভিগেশন বারের সাধারণ গঠন
- ৮৫.নেভিগেশন বারের বাটনে লিংক যুক্ত করন
- ৮৬.নেভিগেশন বারের div উপাদানের ডিজাইন
- ৮৭.নেভিগেশন বারে ul,li উপাদানের ডিজাইন
- ৮৮.নেভিগেশন বারে a উপাদানের ডিজাইন
- ৮৯.নেভিগেশন বারের মাউস ইফেক্ট
- ৯০.নেভিগেশন বারে ইমেজ রিপিটেশন
- ৯১.ভার্টিক্যাল নেভিগেশন বার
- ৯২.হরিজন্টাল নেভিগেশন বার
- ৯৩.ইমেজ গ্যালারি
- ৯৪.ইমেজ গ্যালারির বৈশিষ্ট্য সমূহ
- ৯৫.ইমেজ গ্যালারির ইমেজের গঠন
- ৯৬.সম্পূর্ণ ইমেজ গ্যালারির গঠন
- ৯৭.সম্পূর্ণ ইমেজ গ্যালারির এরিয়া,ব্যাকগ্রাউন্ড এবং বর্ডার নির্ধারণ
- ৯৮.ইমেজ গ্যালারিতে নির্দিষ্ট আকৃতির ইমেজ সংযোজন
- ১০০.সাধারণ অবস্থায় ইমেজ গ্যালারিতে বড় আকৃতির ইমেজ লুকানো
- ১০১.ইমেজ গ্যালারিতে ছোট ইমেজের বর্ডার এবং মার্জিন
- ১০২.গ্যালারী স্ক্রিন
- ১০৩.ইমেজ গ্যালারীর ছোট ইমেজের বর্ডার পরিবর্তন
- ১০৪.ইমেজ গ্যালারীতে বড় ইমেজ প্রদর্শন
- ১০৫.ইমেজ গ্যালারীতে বড় ইমেজের জন্য স্ট্যাইল তৈরি
- ১০৬.ইমেজ গ্যালারীতে বড় ইমেজের নিচে ইমেজ সম্পর্কিত লেখা প্রদর্শন
- ১০৭.ইমেজ গ্যালারী পূর্ণাঙ্গ প্রজেক্ট
- ১০৮.ওয়েব পেজে ইমেজ গ্যালারী যুক্ত করার প্রণালী