সিএসএস সিলেক্টর টিউটোরিয়াল (CSS Selector Tutorial in Bangla)

 

**  এই টিউটোরিয়ালটি সিএসএস এ অনেক গুরত্বপূর্ন, এটা শিখলেই অর্ধেক কাজ শেষ।

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে,এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়।সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে।সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমন:

রুল সেট বা রুল : রুল (css rule) সবসময় শুনে থাকবেন। নিচের ছবিতে Selector আর declaration block টি মিলে একটা রুল। অর্থ্যাৎ কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট করে সেটার জন্য যেসব সিএসএস লেখা হয় তা হচ্ছে একটা রুল।

বাকি যেগুলি জানতে হবে তা নিচের ছবিতে পরিষ্কার দেখিয়ে দেয়া হয়েছে। কোনটা Selector, কোনটা property (প্রোপার্টি), কোনটা value (মান) ইত্যাদি খুব ভাল করে দেখে নিন। পুরো সিএসএস টিউটোরিয়াল জুড়ে শুধু মুলত ৩টি জিনিসের আলোচনা হবে

সিলেক্টর : কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট বা টার্গেট করে সেটার জন্য সিএসএস রুল লেখা হয়। এলিমেন্টে id, class এট্রিবিউটের যে মান দেয়া থাকে সেটা দিয়েই সিলেক্ট/টার্গেট করা যায়। আরও বিস্তারিত নিচের লাইনগুলিতে...

প্রেপার্টি : সিএসএস এ শত শত প্রোপার্টি আছে। এক একটি দিয়ে এক এক কাজ হয় যেমন "background-color" প্রোপার্টি দিয়ে কোন এলিমেন্টের ব্যাকগ্রাউন্ডে রং দেয়া যায়। "font-family" দিয়ে এলিমেন্ট টির ফন্ট কি হবে সেটা ঠিক করা যায় ইত্যাদি।

মান (value) : প্রত্যেকটি প্রোপার্টির নির্দিষ্ট মান আছে। এই প্রোপার্টি এবং প্রোপার্টিগুলির মান কি কি হবে সেগুলি যত বেশি মুখস্থ থাকবে তত ভাল কাজ করতে পারবেন। তবে কাজ করে করে প্রফেশনাল হয়ে গেলে শত শত প্রোপার্টি এবং এদের মানগুলি মুখস্থই থাকে।

01.h4

02.{

03.background-color:white;

04.font-size:12px;

05.}

06.p

07.{

08.color:red;

09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর,h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।

h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।

সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।

background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।

আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট।

উপরের কোডে দুটি রুল আছে h4 এবং p

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হল:

* (ইউনিভার্সাল সিলেক্টর)

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

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমন

1.*{

2.margin:0;

3.padding:0;

4.}

এই কাজটি করা অপ্রোয়জনীয়,এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

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

1.p{

2.background-color:orange;

3.}

4.a{

5.color:maroon;

6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর। p সিলেক্টর এইচটিএমএল পেজের সব <p> এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

ডিসেনডেন্ট সিলেক্টর

1.li a {

2.text-decoration: none;

3.color:red;

4.}

এইচটিএমএল ফাইল

01.<div id="menu">

02.<ul>                                       

03.<li><a href="#" title="">CSS</a></li>

04.<li><a href="#" title="">HTML</a>

05.<ul> 

06.<li> Child </li> 

07.</ul>

08.</li>

09.<li><a href="#" title="">JS</a></li>

10.<li><a href="#" title="">PHP</a></li>

11.<li><a href="#" title="">MySQL</a></li>

12.</ul>

13.</div>

ধরুন আপনি li এলিমেন্ট এর অধীনস্থ a এলিমেন্ট কে টার্গেট করতে চাচ্ছেন তখন সিএসএস রুল লিখতে হবে উপরের মত।এই কোডের প্রভাব আপনার এইচটিএমএল পেজের  শুধু li এর অধীনস্থ a তে গিয়ে পরবে।

সিডো ক্লাস (pseudo class)

1.a:link{color:blue;}

2.a:visited { color: blue; }

3.a:hover{color:red;}

4.a:active { color: red; }

:link, :visited, :hover, :active এসব হচ্ছে সিডো ক্লাস।ধরুন উপরের এইচটিএমএল ফাইলটির জন্য যদি এই রুলটি প্রয়োগ করেন তাহলে সব লিংক এবং ভিজিটেড লিংক এর রং হবে নীল।আর হোভার এবং সক্রিয় লিংক এর রং হবে লাল।সিএসএস কোডটি ইচ্ছে করলে এভাবে লিখতে পারতেন।

1.a:link, a:visited { color: blue; }

2.a:hover, a:active { color: red; }

এডজেইসেন্ট সিলেক্টর (Adjacent Selector)

1.h2+h3{

2.color:lime;

3.}

ধরুন আপনি <h3> এলিমেন্টকে টার্গেট করতে চাচ্ছেন,শুধুমাত্র ঐ <h3> কে যেটা <h2> এর ইমিডিয়েট পরে আছে।উপরের কোড দ্বারা আপনার এইচটিএমএল পেজের হেডিং ৩ এর রং lime হবে যদি সেটা হেডিং ২ এর পরে থাকে।

*<h2> এরপর যদি অন্য কোন এলিমেন্ট থাকে এবং এরপর <h3> থাকে তাহলে এই <h3> এর রং lime হবেনা কারন এটা <h2> এর ইমিডিয়েট পরে নেই।

*h2+h3 দেখে এটা মনে করা যাবেনা যে দুটোরই রং lime হবে,শুধু <h3> পরিবর্তন হবে।

direct children সিলেক্টর

1.div#menu> ul { border: 1px solid black; }

এই রুলটি যদি উপরের এইচটিএমএল পেজে প্রয়োগ করেন তাহলে  ul এলিমেন্ট এর উপর একটা বর্ডার হবে তবে Children লেখাটির উপর বর্ডার আসবেনা যদিও এটা আরেকটা ul এর মধ্যে আছে।কারন Children লেখাটি যে ul এর মধ্যে আছে সেটা menu আইডির direct children নয়।

এট্রিবিউট সিলেক্টর

1.img[src="css selector.jpg"] {

2.border: 5px solid #000000;

3.}

আপনার এইচটিএমএল ফাইলে যদি নিচের মত লাইন থাকে তাহলে উপরের কোডটি দিয়ে <img> এলিমেন্টের এট্রিবিউট সিলেক্ট করে এর বর্ডার ৫ পিক্সেল এবং বর্ডার রং কালো করে দেবে।

1.<img src="/css selector.jpg" width="510" height="205">

গ্রুপিং সিলেক্টর

যদি একাধিক এলিমেন্টের একই স্টাইল করতে চান তখন গ্রুপিং সিলেক্টর ব্যবহার করবেন।ধরুন আপনি চাচ্ছেন আপনার পেজের সব হেডিং এবং লিংক এর রং একই হবে তখন নিচের মত করে লিখতে পারেন।

1.h1,h2,h3,h4,a{

2.color:red;

3.}

ধরুন আপনার পেজের একটা ডিভের (div)এর আইডি হচ্ছে menu (id="menu") আার এই ডিভের ভিতরে সব লিংক এবং হেডিং এর রং লাল করতে চাচ্ছেন তখন এভাবে

1.#menu a, #menu h1,#menu h2, #menu h3{

2.color:red;

3.}

* আপনি যদি #menu a,h1,h2... এভাবে লেখেন তাহলে ভুল হবে।