CSS ব্যবহার করে ওয়েব পেজ স্টাইল করার সময়, আপনি প্রায়শই আপনার পেজের নির্দিষ্ট অংশগুলো টার্গেট করতে চাবেন। এক বা একাধিক এলিমেন্ট সিলেক্ট করার উপায়গুলোর মধ্যে একটি হলো তাদের ID এবং/অথবা Class অ্যাট্রিবিউট দিয়ে।
এই টিউটোরিয়ালের মাঝপথে যাওয়ার সময়, ইন্টারঅ্যাক্টিভ Codepen চেক আউট করুন এবং আমার সাথে খেলা করুন!
ID অ্যাট্রিবিউট এবং CSS সিলেক্টর
চলুন <p> ট্যাগ ব্যবহার করে একটি সিম্পল প্যারাগ্রাফ বানাই:
<p> Color this paragraph! </p>
একটি ID হলো একটি ইউনিক আইডেন্টিফায়ার যা আপনি যেকোনো একক এলিমেন্টে যোগ করেন সেটিকে অনন্যভাবে শনাক্ত করতে। এটি id=”#NAME” কনভেনশন ফলো করে।
এটি মনে রেখে, এবং যেহেতু আমরা আমাদের প্যারাগ্রাফ রঙ করতে চাই, এটিকে একটি অনন্য নাম দিয়ে নামकरण করি।
<p id="paragraph-colored"> Color this paragraph! </p>
এখন যেহেতু আমাদের ID ইউনিক আইডেন্টিফায়ার আছে, আমাদের নিশ্চিত করতে হবে আমরা একই ID অন্য কোনো এলিমেন্টে যোগ করি না। ব্রাউজার শিকায়ত করবে না, কিন্তু এটি উদ্দেশ্য হারাবে এবং CSS অনুমান অনুযায়ী কাজ করবে না।
আমাদের ID থাকার সাথে, আমরা CSS-এ হ্যাশ সিম্বল # ব্যবহার করে সিলেক্ট করতে পারি। চলুন আমাদের p ট্যাগকে বেগুনি রঙ করি:
#paragraph-colored { color: purple; }
সহজ সত্যি? 😄
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
Class অ্যাট্রিবিউট এবং এর CSS সিলেক্টর
ঠিক আছে, আমাদের প্যারাগ্রাফের টেক্সট বেগুনি রঙে হয়ে গেল। এখন ধরি আমাদের সেই একক p ট্যাগের নিচে অনেকটি অ্যাভোকাডো ইমেজ আছে:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
আমরা এই সব অ্যাভোকাডো-ডেভেলপারদের (যা সেটি মানে কী হোক) কীভাবে শনাক্ত এবং সিলেক্ট করব? আমরা জানি আমরা ID ট্যাগ ব্যবহার করতে পারি না, কারণ এটি একটি একক আইটেমকে অনন্যভাবে শনাক্ত করতে ব্যবহৃত হয়। এখানেই class অ্যাট্রিবিউট কাজে আসে।
class অ্যাট্রিবিউট class=”#CLASS_NAME” কনভেনশন ফলো করে। যেহেতু অনেক মেম্বার একটি ক্লাসে থাকতে পারে, আমাদের সব অ্যাভোকাডো ডেভেলপারদের একটি ক্লাস অ্যাসাইন করা যেতে পারে যেন:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
চমৎকার! আমাদের অ্যাভোকাডো ইমেজগুলোর "avocado-devs" ক্লাস অ্যাসাইন করা হয়েছে। আমরা এখন CSS ক্লাস সিলেক্টর ব্যবহার করতে পারি যা একটি সিম্পল ডট (.) দিয়ে প্রতিনিধিত্ব করা হয়। চলুন আমাদের অ্যাভোকাডো ডেভসের CSS filter প্রপার্টি যোগ করি। আমরা ধরে নিচ্ছি সে রাত দেরি পর্যন্ত কাজ করছে তাই তাদের রঙ ১০০ পার্সেন্ট ইনভার্ট করি।
.avocado-devs { filter: invert(100) }
ক্লাস দিয়ে আমরা মূলত গ্রুপ তৈরি করি এবং তারপর CSS ক্লাস সিলেক্টর দিয়ে গ্রুপ এলিমেন্টগুলোর ওপর যestyle চাই প্রয়োগ করি।
জেনেরিক ট্যাগ সিলেক্টর ক্লাস সিলেক্টরের সাথে ব্যবহার
আমরা প্রায়শই দেখি যে CSS-এ ক্লাস সিলেক্ট করার সময় জেনেরিক ট্যাগ সিলেক্টর ডট সিলেক্টরের সাথে কনজাঙ্কশনে ব্যবহার করা ভালো। কেন? কারণ আমরা আমাদের সিলেক্টরগুলোতে যত বেশি স্পেসিফিক হব, আমাদের CSS তত ভালো প্রয়োগ হবে।
CSS-এ, আমরা জেনেরিক ট্যাগ সিলেক্টর ব্যবহার করি ট্যাগ নাম দিয়ে সেগুলোকে রেফার করে। তাই উদাহরণস্বরূপ এগুলো সব বৈধ ট্যাগ সিলেক্টর:
/* H1 */ h1{} /* Paragraphs */ p{ }
তাই আমরা আমাদের ইমেজ সিলেক্টরকে img জেনেরিক ট্যাগ অন্তর্ভুক্ত করে রিফ্যাক্টর করতে পারি:
img.avocado-devs { filter: invert(100) }
ফাংশন্যালিটি পরিবর্তন হয়নি, কিন্তু আপনার কোড বড় হওয়ার সাথে এই স্পেসিফিসিটি গুরুত্বপূর্ণ। এটি আপনার কোডকে আরও পঠনযোগ্য করবেও সাহায্য করবে। অন্যান্য ডেভেলপাররা দেখতে পাবেন যে avocado-devs ক্লাস একটি ইমেজকে রেফার করে।
এটি গুরুত্বপূর্ণ কারণ এখানে আমরা শুধু সেই ইমেজগুলোর ওপর ফিল্টার প্রয়োগ করছি যাদের স্পেসিফিক ক্লাস নাম আছে। আপনি যদি অন্য একটি অ্যাভোকাডো-ডেভ ইমেজ যোগ করেন যেটির উপযুক্ত ক্লাস নেই, স্টাইল প্রয়োগ হবে না। ওয়েব ডেভেলপার হিসেবে এই কন্ডিশনাল আচরণ প্রায়শই আমরা যা চাই।
