CSS প্রকার নির্বাচক

CSS টাইপ নির্বাচক (এটিকে উপাদানের প্রকার নির্বাচকও বলা হয় ) এইচটিএমএল উপাদানগুলিকে তাদের প্রকার অনুসারে লক্ষ্য করতে ব্যবহৃত হয়। ধরনটি অন্তর্নির্মিত HTML উপাদানগুলির যেকোনও হতে পারে, যেমন <h2> , <p> , <button> .

টাইপ সিলেক্টর সিনট্যাক্স

আমরা টাইপ নির্বাচক

element-name {
    property-name: value;
}

উদাহরণস্বরূপ, আসুন এই বোতাম উপাদানটিকে এর টাইপ নির্বাচকের মাধ্যমে স্টাইল করি:

<button>Click me!</button>

CSS:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

ফলাফলঃ

আপনি যখন টাইপ নির্বাচক ব্যবহার করেন তখন আপনি আপনার ওয়েবসাইটে বিস্তৃতভাবে উপাদানের স্টাইল করেন

সুতরাং আপনার ওয়েবসাইটে যদি 10টি বোতাম উপাদান থাকে এবং আপনি উপরে থেকে CSS ব্যবহার করেন, তাহলে প্রতিটি বোতাম একই স্টাইলিং পাবে। এটি হতে পারে বা নাও পারে৷ প্রেক্ষাপটের উপর নির্ভর করে আপনি যা চান তাই হোন।

বেস শৈলী

এইচটিএমএল উপাদানগুলিতে সরাসরি কিছু বিস্তৃত বেস স্টাইলিং সেট করা একটি ভাল ধারণা হতে পারে। যাইহোক, বেস স্টাইলিং যতটা সম্ভব অনির্দিষ্ট হওয়া উচিত। এটি আপনার UI জুড়ে অর্থপূর্ণ চাক্ষুষ সামঞ্জস্য প্রয়োগ করার উপায় হিসাবে কাজ করা উচিত — এবং অপ্রয়োজনীয় কোড পুনরাবৃত্তি এড়াতে হবে।

আপনি প্রায়শই যে অঞ্চলগুলির সাথে সামঞ্জস্যপূর্ণ হতে চান:

• ফন্ট (এটিকে টাইপফেসও বলা হয়)
• ফন্টের আকার
• রেখার উচ্চতা
• রঙ
• স্পেসিং (হোয়াইটস্পেস)

উদাহরণস্বরূপ, আপনার UI-তে ফন্ট পরিবারের পছন্দের সাথে সামঞ্জস্যপূর্ণ হওয়া একটি ভাল অভ্যাস। আপনি 5টি ভিন্ন ফন্ট ব্যবহার করতে চান না, এটি আপনার UI কে অদ্ভুত এবং বেমানান দেখায়। আপনি বেশিরভাগ ওয়েবসাইটে 1 থেকে সর্বোচ্চ 3টি ভিন্ন ফন্ট ফ্যামিলির মধ্যে কোথাও চান৷

ধরা যাক আপনি আপনার ওয়েবসাইটে দুই ধরনের ফন্ট ব্যবহার করতে চান:

1. আপনার অনুচ্ছেদ এবং তালিকার জন্য একটি Serif
2. অন্য সবকিছুর জন্য একটি Sans Serif।

এই ক্ষেত্রে, এই ফন্ট পরিবারগুলিকে প্রয়োগ করতে বিস্তৃত প্রকার নির্বাচক ব্যবহার করা নিখুঁত বোধগম্য হয়:

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

উপরের CSS এর সাথে, প্রতিটি HTML উপাদান রোবোটো ফন্ট ব্যবহার করবে, অনুচ্ছেদ এবং তালিকাগুলি ছাড়া যেগুলি 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 নামেও পরিচিত।

সারাংশে:

• সাধারণ শৈলীগুলির একটি বেসলাইন স্থাপন করতে টাইপ নির্বাচক ব্যবহার করুন যা ধারাবাহিকতার মাধ্যমে আপনার ব্র্যান্ডের ভিজ্যুয়াল আইডেন্টিটি কার্যকর করে৷
• বেস স্টাইলগুলির উপরে তৈরি করতে ক্লাসগুলি (এবং কখনও কখনও আইডি) ব্যবহার করুন, তারা যে নির্দিষ্ট পরিবেশে রয়েছেন সেখানে তাদের ভূমিকার উপর ভিত্তি করে স্টাইল উপাদানগুলি তৈরি করুন৷