CSS ক্লাস সিলেক্টর उन সব HTML এলিমেন্টকে টার্গেট করে যাদের একটি মিলে যাওয়া ক্লাস নেম অ্যাট্রিবিউট অ্যাটাচড থাকে।
ক্লাস সিলেক্টর সিনট্যাক্স:
.class-name { property-name: value; }এখানে একটি HTML এলিমেন্ট যেটি সেইম ক্লাস নেম অ্যাট্রিবিউট ভ্যালু হিসেবে রাখে:
<div class="class-name"></div>CSS ক্লাস সিলেক্টর .class-name <div> এলিমেন্টের সাথে অ্যাটাচড যেটির class-name অ্যাট্রিবিউট আছে। এর মানে যে আপনি আপনার CSS স্টাইলশীটে .class-name-এ যেসব স্টাইলিং প্রপার্টি যোগ করবেন সেগুলো div-এ প্রয়োগ হবে।
ডট (.) ক্লাস নামের আগে একটি স্পেসিফিক CSS সিনট্যাক্স। আপনি যখন ক্লাস নাম HTML এলিমেন্টে একটি ক্লাস অ্যাট্রিবিউট হিসেবে যোগ করেন, তখন আপনি . ব্যবহার করেন না।
এখন আমরা যা শিখলাম সেটি একটি প্র্যাকটিক্যাল উদাহরণে ব্যবহার করি।
এখানে একটি HTML <button> এলিমেন্ট কিছু ডিফল্ট স্টাইলিংসহ যা ব্রাউজারের ইউজার এজেন্ট স্টাইলশীট থেকে ইনহেরিট করা:
<button>Button</button>ডিফল্ট লুক:
বোরিং হা?
চলুন ডিফল্ট বাটন স্টাইলিং ওভাররাইড করি একটি CSS ক্লাস .my-button তৈরি করে এবং কিছু স্টাইলিং প্রপার্টি দিয়ে:
.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 ক্লাস যেকোনো HTML এলিমেন্টে রিঅইউজ করা যায়, আইডি সিলেক্টরর বিপরীতে যেটি শুধু একবার ব্যবহার করা যায়।
- আপনি একই এলিমেন্টে একাধিক ভিন্ন CSS ক্লাস যোগ করতে পারেন
<div class="first-class second-class third-class"। এটি আপনাকে একটি ফ্লেক্সিবল উপায় দেয় ছোট ইউটিলিটি ক্লাস দিয়ে আপনার এলিমেন্ট ডিজাইন অ্যাসেম্বল করার, যেন Tailwind CSS ফ্রেমওয়ার্কে দেখা যায়।
