CSS-এ এলিমেন্ট ক্লাস

পূর্ববর্তী পাঠগুলোতে আমরা ট্যাগের নাম দিয়ে পৃষ্ঠার এলিমেন্ট নির্বাচন করেছি, উদাহরণস্বরূপ, সকল প্যারাগ্রাফকে একই সাথে স্টাইল প্রয়োগ করে। তবে, একটি পৃষ্ঠায় বিভিন্ন ধরনের প্যারাগ্রাফ থাকতে পারে, যেগুলোতে বিভিন্ন স্টাইল প্রয়োগের প্রয়োজন হয়। এই সমস্যার সমাধান হিসেবে বিভিন্ন প্যারাগ্রাফকে বিভিন্ন CSS ক্লাস-এ অন্তর্ভুক্ত করা যায়।

একটি ট্যাগকে কোনও ক্লাসে অন্তর্ভুক্ত করতে, সেই ট্যাগে class অ্যাট্রিবিউট লিখতে হবে, এবং সেখানে - আপনার বানানো ক্লাসের নাম, যা অক্ষর, সংখ্যা, আন্ডারস্কোর এবং ড্যাশ নিয়ে গঠিত।

আসুন একটি উদাহরণ দেখি। দুটি ধরনের ক্লাস সহ প্যারাগ্রাফ তৈরি করি - eee এবং zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

এখন CSS-এ বিভিন্ন ক্লাসের প্যারাগ্রাফগুলিকে টার্গেট করি এবং তাদের কিছু স্টাইল দেই। উদাহরণস্বরূপ, zzz ক্লাসের প্যারাগ্রাফগুলোকে লাল রং এবং eee ক্লাসের প্যারাগ্রাফগুলোকে সবুজ রং করি।

এর জন্য CSS ফাইলে আমাদের ক্লাসগুলিকে টার্গেট করতে হবে। টার্গেট করার সিনট্যাক্স নিম্নরূপ: প্রথমে একটি ডট (.) চিহ্ন, তারপর আমাদের বানানো ক্লাসের নাম। অর্থাৎ, eee ক্লাসকে টার্গেট করতে .eee লিখতে হবে, এবং zzz ক্লাসকে টার্গেট করতে .zzz লিখতে হবে।

তো, বর্ণিত কাজটি করা যাক। আমাদের HTML-এ আমরা যে ক্লাসগুলি তৈরি করেছি তার জন্য CSS স্টাইল যোগ করি:

.eee {
	color: green;
}
.zzz {
	color: red;
}

আমাদের কোড রান করলে, ফলাফল নিম্নরূপ হবে:

নিম্নলিখিত কোড দেওয়া আছে:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

odd ক্লাসের এলিমেন্টগুলোকে লাল রং করুন এবং eve ক্লাসের এলিমেন্টগুলোকে - সবুজ রং করুন।

নিম্নলিখিত কোড দেওয়া আছে:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

eee ক্লাসের সকল এলিমেন্টকে লাল রং করুন।

ব্যাখ্যা করুন কেন পূর্ববর্তী কাজে li ট্যাগগুলো লাল রং হয়, যদিও রং নির্ধারণকারী ক্লাসটি ul ট্যাগে দেওয়া হয়েছে।