সিএসএস নির্বাচকরা সেই উপাদানগুলি নির্বাচন করে যেখানে আপনি শৈলী প্রয়োগ করতে পারেন। সবচেয়ে মৌলিক নির্বাচক হল উপাদান নির্বাচক, যেটি তার নামের দ্বারা একটি উপাদান নির্বাচন করে। অন্যান্য নির্বাচকদের মধ্যে আইডি, শ্রেণী, সর্বজনীন, এবং বংশধর নির্বাচকদের অন্তর্ভুক্ত৷৷

নির্বাচকরা যেকোনো CSS স্টেটমেন্টের দুটি অংশের একটি। নির্বাচকরা একটি নির্দিষ্ট শৈলীর জন্য একটি HTML পৃষ্ঠার উপাদানগুলিকে লক্ষ্য করতে ব্যবহৃত হয়৷

CSS নির্বাচকদের একটি বিস্তৃত পরিসর রয়েছে যা একটি ওয়েব পৃষ্ঠার উপাদানগুলিকে সুনির্দিষ্টভাবে লক্ষ্য করতে ব্যবহার করা যেতে পারে এবং আপনি যখন একটি ডিজাইন করছেন তখন আপনাকে উচ্চ মাত্রার কাস্টমাইজেশনের অনুমতি দেয়৷

এই নির্দেশিকাটি CSS-এ নির্বাচকদের মৌলিক বিষয়গুলি অন্বেষণ করবে কীভাবে আপনি আপনার কোডে সর্বাধিক ব্যবহৃত নির্বাচকদের সুবিধা নিতে পারেন৷

সিএসএস নির্বাচক

সিএসএস নির্বাচকরা এইচটিএমএল উপাদানগুলি সনাক্ত করে যেখানে আপনি একটি সিএসএস শৈলী প্রয়োগ করতে চান। নির্বাচকরা তাদের নাম, আইডি, শ্রেণী এবং অন্যান্য বৈশিষ্ট্যের উপর ভিত্তি করে উপাদান নির্বাচন করতে পারেন। সিএসএস নিয়মে নির্বাচকরা এক জোড়া বন্ধনীর আগে উপস্থিত হয়।

CSS-এ, নিয়মগুলি ব্যবহার করা হয় শৈলীগুলিকে সংজ্ঞায়িত করতে যা একটি উপাদান বা উপাদানগুলির একটি পরিসরে প্রযোজ্য হবে। নিয়মের দুটি উপাদান আছে:নির্বাচক এবং ঘোষণা।

এখানে CSS-এ একটি নিয়মের উদাহরণ দেওয়া হল:

h1 {
	color: pink;
}

এই CSS নিয়মটি একটি ওয়েব পেজের সমস্ত h1 উপাদানের রঙকে গোলাপী করে দেয়। আমাদের নিয়মের দুটি উপাদান হল:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

• h1 , যা আমাদের শৈলী প্রয়োগ করা হয় যা উপাদান. একে নির্বাচক বলা হয়।
• রঙ:গোলাপী , যা আমাদের নির্বাচকের উপাদানগুলিতে প্রয়োগ করা শৈলী। এটাকে বলে ঘোষণা। এই উদাহরণে, আমরা সমস্ত h1 উপাদানের রঙ পরিবর্তন করে গোলাপী করি।

CSS নির্বাচকরা ওয়েব স্টাইল ডিজাইন করার একটি মৌলিক অংশ। নির্বাচকরা আপনাকে ব্রাউজারকে বলতে দেয় যে কোন উপাদানগুলি একটি নির্দিষ্ট শৈলী ব্যবহার করা উচিত। উদাহরণস্বরূপ, আপনার একটি নির্বাচক থাকতে পারে যেটি ব্রাউজারকে সমস্ত

স্টাইল করার নির্দেশ দেয় উপাদান, বা সমস্ত

উপাদান, একটি ওয়েব পৃষ্ঠায়।

সিএসএস নির্বাচক প্রকারগুলি

সিএসএস বিস্তৃত নির্বাচকদের অফার করে। CSS নিয়মগুলি ডিজাইন করার সময় আপনি যে প্রধান নির্বাচকদের সম্মুখীন হতে পারেন সেগুলির একটি উদাহরণ আসুন।

সিএসএস উপাদান-ভিত্তিক নির্বাচক

উপাদান-ভিত্তিক নির্বাচক আপনাকে একটি নথিতে একটি উপাদানের সমস্ত দৃষ্টান্তে একটি স্টাইল প্রয়োগ করতে দেয় যার সাথে একটি নিয়মের মিল রয়েছে৷ উদাহরণস্বরূপ, আপনি সমস্ত

স্টাইল প্রয়োগ করতে উপাদান নির্বাচক ব্যবহার করতে পারেন একটি পৃষ্ঠায় ট্যাগ।

ধরুন আমরা একটি ওয়েব পৃষ্ঠার সমস্ত অনুচ্ছেদ-ভিত্তিক পাঠ্যের রঙ ধূসর করতে চেয়েছিলাম। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

p {
	color: gray;
}

আমাদের “p” নির্বাচকের ভিতরের ঘোষণাগুলি প্রতিটি অনুচ্ছেদে প্রয়োগ করা হবে (HTML

ট্যাগ) আমাদের ওয়েব পেজে।

সিএসএস আইডি নির্বাচক

CSS আইডি নির্বাচক তার আইডির উপর ভিত্তি করে একটি পৃষ্ঠায় একটি HTML উপাদান নির্বাচন করে। এইচটিএমএল আইডি অনন্য তাই আইডি নির্বাচক একটি ওয়েব পৃষ্ঠার একটি একক উপাদানে শৈলী প্রয়োগ করতে ব্যবহৃত হয়। আইডি সিলেক্টরের সিনট্যাক্স হল একটি হ্যাশ সাইন যার পরে এলিমেন্ট আইডি।

ধরুন আমরা আমাদের পৃষ্ঠায় “box9” নামক একটি উপাদানের CSS উচ্চতা বৈশিষ্ট্যের মান 150px এ সেট করতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

#box9 {
	height: 150px;
}

এই নিয়মটি "box9" আইডি সহ উপাদানটির উচ্চতা 150px এ সেট করবে৷

CSS ক্লাস নির্বাচক

CSS ক্লাস নির্বাচকরা সেই উপাদানগুলি খুঁজে পায় যাদের একটি নির্দিষ্ট শ্রেণী বৈশিষ্ট্য রয়েছে। ক্লাস সিলেক্টরের সিনট্যাক্স হল একটি পিরিয়ড (.) এবং তারপরে আপনি যে ক্লাসটি নির্বাচন করতে চান তার নাম৷

সুতরাং, আপনি যদি “boxMiddle” শ্রেণীকে লক্ষ্য করতে চান, তাহলে আপনি “.boxMiddle” নির্বাচক ব্যবহার করবেন।

আসুন আমরা আমাদের ওয়েব পেজে একটি বাক্স ডিজাইন করছি। বাক্সের একটি গোলাপী পটভূমির রঙ থাকা উচিত। আমাদের বক্সটি "পিঙ্কবক্স" ক্লাস বরাদ্দ করা হয়েছে, যেখানে আমরা আমাদের শৈলীগুলি প্রয়োগ করতে পারি। এখানে আমরা যে কোডটি ব্যবহার করব তা আমরা পিঙ্কবক্স ক্লাস সহ উপাদানগুলির রঙকে গোলাপী করতে ব্যবহার করব:

.pinkBox {
	color: pink;
}

"পিঙ্কবক্স" ক্লাস সহ একটি ওয়েব পৃষ্ঠার প্রতিটি উপাদান গোলাপীতে সেট করা হবে৷

উপরন্তু, আপনি এটিও নির্দিষ্ট করতে পারেন যে শুধুমাত্র একটি নির্দিষ্ট শ্রেণীর সাথে নির্দিষ্ট উপাদানগুলি একটি শৈলী দ্বারা প্রভাবিত হওয়া উচিত। শুধুমাত্র একটি শ্রেণী নির্বাচক ব্যবহার করে, একটি নির্দিষ্ট শ্রেণীর প্রতিটি উপাদান আপনার সংজ্ঞায়িত শৈলী দ্বারা প্রভাবিত হবে৷

যদি আমরা একটি এলিমেন্ট টাইপের পূর্বে একটি ক্লাস সিলেক্টর ব্যবহার করি তবে আমরা একটি নির্দিষ্ট ক্লাসের সাথে শুধুমাত্র নির্দিষ্ট উপাদানগুলিতে একটি শৈলী প্রয়োগ করতে পারি। ধরুন আমরা প্রতিটি HTML

div.pinkBox {
	color: pink;
}

* {
	text-align: center;
}

li a {
	background-color: yellow;
}

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

h2, .alignCenter {
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size 18px;
	font-weight: normal;
}

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}