CSS টাইপ সিলেক্টর (একেও এলিমেন্ট টাইপ সিলেক্টর বলা হয়) HTML এলিমেন্টগুলোর টাইপ দিয়ে টার্গেট করতে ব্যবহৃত হয়। টাইপটি যেকোনো বিল্ট-ইন HTML এলিমেন্ট হতে পারে, যেমন <h2>, <p>, <button>।
টাইপ সিলেক্টর সিনট্যাক্স
টাইপ সিলেক্টর দিয়ে এলিমেন্ট স্টাইল করার জন্য আমরা নিচের সিনট্যাক্স ব্যবহার করি
element-name { property-name: value; }উদাহরণস্বরূপ এই বাটন এলিমেন্টকে এর টাইপ সিলেক্টর দিয়ে স্টাইল করি:
<button>Click me!</button>CSS:
button { font-size: 32px; padding: 1rem; color: red; }ফলাফল:
আপনি যখন টাইপ সিলেক্টর ব্যবহার করেন, আপনি আপনার ওয়েবসাইটের এলিমেন্টগুলোকে ব্রডলি স্টাইল করেন।
তাই যদি আপনার ওয়েবসাইটে ১০টি বাটন এলিমেন্ট থাকে, এবং আপনি উপরের CSS ব্যবহার করেন, তবে প্রতিটি বাটন একই স্টাইলিং পাবে। এটি হয়তো হবে বা নাও হতে পারে আপনি যা চান, কনটেক্সটের ওপর ডিপেন্ড করে।
বেস স্টাইলস
HTML এলিমেন্টে সরাসরি কিছু ব্রড বেস স্টাইলিং সেট করা একটি ভালো আইডিয়া হতে পারে। তবে, বেস স্টাইলিং যতটা সম্ভব আনস্পেসিফিক হওয়া উচিত। এটাকে আপনার UI-এ মেনিংফুল ভিজ্যুয়াল কনসিস্টেন্সি এনফোর্স করার একটি উপায় হিসেবে কাজ করা উচিত — এবং অনাবশ্যক কোড রিপিটিশন এড়াতে।
যে এরিয়াগুলোতে আপনি প্রায়শই কনসিস্টেন্ট থাকতে চান:
- ফন্টস (একেও টাইপফেস বলা হয়)
- ফন্ট সাইজ
- লাইন হাইট
- রঙ
- স্পেসিং (হোয়াইটস্পেস)
উদাহরণস্বরূপ, আপনার UI-এ ফন্ট ফ্যামিলি পছন্দের সাথে কনসিস্টেন্ট থাকা একটি ভালো প্র্যাকটিস। আপনি ৫টি ভিন্ন ফন্ট ব্যবহার করবেন না, এটি আপনার UI কiamo ওইইড এবং ইনকনসিস্টেন্ট করে। আপনি অধিকাংশ ওয়েবসাইটে ১ থেকে সর্বোচ্চ ৩টি ভিন্ন ফন্ট ফ্যামিলি চান।
মান লইয়ে নিন আপনি আপনার ওয়েবসাইটে দুটি টাইপের ফন্ট ব্যবহার করতে চান:
- একটি সেরিফ আপনার প্যারাগ্রাফ এবং লিস্টের জন্য
- একটি স্যানস সেরিফ বাকি সবকিছুর জন্য।
এই কেসে, ব্রড টাইপ সিলেক্টর ব্যবহার করে সেই ফন্ট ফ্যামিলিগুলো প্রয়োগ করা পুরোপুরি অর্থপূর্ণ:
/* Roboto is a sans serif*/ html, body { font-family: roboto; } /* Merriweather is a serif*/ p, li { font-family: merriweather; }উপরের CSS-এ, প্রতিটি HTML এলিমেন্ট Roboto ফন্ট ব্যবহার করবে, প্যারাগ্রাফ এবং লিস্ট বাদে যারা Merriweather ব্যবহার করবে।
টাইপ সিলেক্টর কখন ব্যবহার করবেন না
এটি সাধারণত ব্যাড প্র্যাকটিস যে যেকোনো এলিমেন্টকে ব্রড স্ট্রোক দিয়ে "ওভার স্টাইল" করা, কারণ এটা সেই এলিমেন্টের প্রতিটি রিপ্রেজেন্টেশনকে আপনার পেজে প্রভাবিত করে।
উদাহরণস্বরূপ, আপনার CSS-এ এটা করবেন না:
button { font-size: 1.125rem; padding: 1.5rem; margin-top: 1rem; border-radius: 8px; border: 1px solid #444444; color: green; background-color: black; transition: all 1s ease-in; }উপরেরটি আপনার ওয়েবসাইটের প্রতিটি বাটন এলিমেন্টে একগুচ্ছ স্টাইল প্রয়োগ করবে। চান্সেস হচ্ছে আপনার ওয়েবসাইটে একাধিক বাটন আছে যাদের ভিন্ন রোল। আপনি যদি বেস UI ডিজাইন কনসিস্টেন্ট রাখতে চান (বিশেষ করে টাইপোগ্রাফি) তবে আপনি সেগুলোকে সব একসাথে লুক বা বিহেভ এক্স্যাক্টলি সেম রাখতে চাইবেন না। বিশেষ করে মার্জিন ভ্যালু যেকোনো দিয়ে এলিমেন্ট টাইপে ব্রডলি প্রয়োগ করা ডেঞ্জারাস।
বেশক, আপনি সবসময় ক্লাস সিলেক্টর ব্যবহার করে যেকোনো বেস স্টাইলিং এলিমেন্টে ওভাররাইড করতে পারেন। তবে, ক্লাস ব্যবহারের উদ্দেশ্য হচ্ছে না বেস স্টাইলগুলো এলিমেন্ট সিলেক্টর থেকে পাস ডাউন হয়েছে সেগুলো আনডゥ/ওভাররাইড করার পিছনে 시간을 ব্যয় করা।
এলিমেন্টে ক্লাস ব্যবহারের উদ্দেশ্য হচ্ছে:
- বেস স্টাইলসকে এলিমেন্টে এক্সটেন্ড করা নির্দিষ্ট সিচুয়েশনগুলোর জন্য যেগুলো সেটি ডিমান্ড করে। উদাহরণস্বরূপ, আপনি হয়তো আপনার হিরো সেকশনের কল টু অ্যাকশন বাটনকে সব জায়গা থেকে কিছুটা বড় রাখতে চান।
- রিঅসাবিলিটি। ক্লাসগুলো অসীমবার রিঅইউজ করা যায়, যা সেগুলোক ফ্লেক্সিবল এবং ইফিশিয়েন্ট বানায়। এর একটি গরেট উদাহরণ Tailwind CSS ফ্রেমওয়ার্ক যা সিংগেল-পারপজ ইউটিলিটি ক্লাসের ওপর ভিত্তি করে, যাকেও ফাংশনাল CSS বলা হয়।
সংক্ষেপে:
- টাইপ সিলেক্টর ব্যবহার করুন জেনারেল স্টাইলের একটি বেসলাইন স্থাপন করতে যা আপনার ব্র্যান্ডের ভিজ্যুয়াল আইডেন্টিটি কনসিস্টেন্সি দিয়ে এনফোর্স করে।
- ক্লাসেস (এবং কখনও কখনও আইডিস) ব্যবহার করুন বেস স্টাইলসের ওপর বিল্ড আপ করতে, এলিমেন্টগুলোকে তাদের রোল অনুযায়ী স্টাইল করতে স্পেসিফিক এনভায়রনমেন্টে যেগুলো আছে।
