CSS শ্রেণী নির্বাচক সমস্ত HTML উপাদানকে লক্ষ্য করে যেগুলির সাথে একটি মিলিত শ্রেণীর নামের বৈশিষ্ট্য সংযুক্ত থাকে।
ক্লাস সিলেক্টর সিনট্যাক্স:
.class-name {
property-name: value;
}এখানে একটি অ্যাট্রিবিউট মান হিসাবে একই শ্রেণীর নামের সাথে একটি HTML উপাদান রয়েছে:
<div class="class-name"></div>
CSS ক্লাস নির্বাচক .class-name <div> এর সাথে সংযুক্ত class-name সহ উপাদান বৈশিষ্ট্য তার মানে আপনি .class-name-এ যে কোনও স্টাইলিং বৈশিষ্ট্য যোগ করুন আপনার CSS স্টাইলশীটে ডিভিতে প্রয়োগ করুন।
বিন্দু (. ) ক্লাসের নামের আগে একটি নির্দিষ্ট সিএসএস সিনট্যাক্স। আপনি যখন ক্লাসের অ্যাট্রিবিউট হিসেবে HTML এলিমেন্টে ক্লাসের নাম যোগ করেন তখন আপনি . .
এখন আমরা একটি ব্যবহারিক উদাহরণে যা শিখেছি তা ব্যবহার করি।
এখানে একটি HTML <button> আছে কিছু ডিফল্ট স্টাইলিং সহ উপাদান যা ব্রাউজারের ব্যবহারকারী এজেন্ট স্টাইলশীট থেকে উত্তরাধিকারসূত্রে পাওয়া যায়:
<button>Button</button>ডিফল্ট চেহারা:
বিরক্তিকর হাহ?
চলুন .my-button নামে একটি CSS ক্লাস তৈরি করে ডিফল্ট বোতাম স্টাইলিং ওভাররাইড করি এবং এটিকে কিছু স্টাইলিং বৈশিষ্ট্য দিন:
.my-button {
font-size: 18px;
padding: 14px 24px;
border-radius: 8px;
border: none;
background-color: #F7575C;
color: white;
}এবং একটি ক্লাস অ্যাট্রিবিউট হিসাবে বোতাম উপাদান যোগ করুন:
<button class="my-button">Button</button>ফলাফলঃ
CSS ক্লাস সিলেক্টর ব্যবহার করার বিষয়ে আপনার যা জানা দরকার তা আপনি সবেমাত্র শিখেছেন।
জেনে রাখা ভালো:
- সিএসএস ক্লাস যেকোন এইচটিএমএল এলিমেন্টে পুনরায় ব্যবহার করা যেতে পারে, আইডি নির্বাচকদের বিপরীতে, যা শুধুমাত্র একবার ব্যবহার করা যেতে পারে।
- আপনি একই উপাদানে একাধিক ভিন্ন CSS ক্লাস যোগ করতে পারেন
<div class="first-class second-class third-class". এটি আপনাকে ছোট ইউটিলিটি ক্লাসের সাথে আপনার উপাদান ডিজাইনগুলিকে একত্রিত করার একটি নমনীয় উপায় দেয়, যেমন Tailwind CSS ফ্রেমওয়ার্কের সাথে দেখা যায়৷
