ওয়েব ডিজাইন CSS Part-2 (CSS Selectors)

Related Articles

মঙ্গলে জনবসতি গড়ে তোলা বুদ্ধিমানের কাজ নয়

May 31, 2018

ফসিলাইজড খুশকির মাধ্যমে বিবর্তিত বর্তমান প্রাণীর অবস্থান

May 26, 2018

ডার্ক ম্যাটার ও আমাদের সম্প্রসারণশীল বিশ্ব

May 16, 2018

CSS Selectors:

HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় । এ গুলোর মধ্যে উল্লেখযোগ্য হচ্ছে ….

All selectors = *
Class selectors =  .
Id selectors = #
HTML tag Selectors = p, h1, h2, span etc.

All selectors:

ইউনিভার্সাল সিলেক্টর HTML পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে।যেমন নিচের কোডটি সব HTML এলিমেন্ট এর রং লাল করে দেবে। যেমন-

*{
color:red;
}

Class selectors:

CSS এ ওয়েব পেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি অন্যতম পদ্ধতি ক্লাস সিলেক্টর । একাধিক উপাদানকে একই ক্লাস সিলেক্টর দ্বারা চিহ্নিত করা যায়, তাই এটি কোডিং এর পরিমাণ হ্রাস করতে সাহায্য করে। যেমন –

<p class=”p_class”> Class selectors  </p> এর জন্য css

.p_class {
color: #555;
font-size: 20px
}

ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p class=” p_class “>। এখানে  p_class  ক্লাসের নাম। স্টাইল সিটে ক্লাসকে চিহ্নিত করতে (.) ডট চিহ্ন ব্যবহার করা হয়।

Id selectors:

CSS এ ওয়েব পেজের কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি জনপ্রিয় পদ্ধতি আইডি সিলেক্টর । একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।

যেমন <p id=”id_name”> Id selectors </p>এর জন্য css কোড

# id_name {
color:#555;
text-align:justify;
}

আইডি  সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id=” id_name “>। এখানে id_name আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয়।

HTML tag Selectors:

CSS এ ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য যখন HTML ট্যাগ সমূহ ব্যবহার করা হয় তাকে ট্যাগ সিলেক্টর বলে। যেমন-

P {
Color : red;
Font-size : 20px;
}