বাংলায় সিএসএস টিউটোরিয়াল: সিলেক্টর সমূহ


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


সিলেক্টর এর উদাহরণ

নিচের কোডটি দেখুন। এই কোড এ p হলো সিলেক্টর। এখানে p সিলেক্টর দেওয়ায় সিএসএস টি HTML ডকুমেন্ট এর <p> ট্যাগ স্টাইল করবে।


p {
	text-align: center;
	color: red;
}


সিলেক্টর এটা খুঁজে বের করে যে HTML এর কোন এলিমেন্ট বা এলিমেন্ট গুলো স্টাইল করা হবে। সিলেক্টর পাঁচ ধরনের হয়।

  1. এলিমেন্ট সিলেক্টর
  2. আইডি
  3. ক্লাস সিলেক্টর
  4. ইউনিভার্সাল সিলেক্টর
  5. গ্রুপিং সিলেক্টর


এলিমেন্ট সিলেক্টর

এলিমেন্ট সিলেক্টর কোনো HTML ট্যাগ এর মধ্যে থাকা কন্টেন্ট সমূহ স্টাইল করার জন্য ব্যবহার করা হয়। এলিমেন্ট সিলেক্টর সমূহ HTML ট্যাগ এর নাম অনুসারে হয়ে থাকে। যেমন আমি যদি আমি যদি প্যারাগ্রাফ ট্যাগ এর কন্টেন্ট সমূহ স্টাইল করতে চাই তাহলে নিচের মতো করে সিএসএস সিলেক্টর নিতে হবে।


p {
	text-align: center;
	color: red;
}


আইডি সিলেক্টর

এইচটিএমএল এর থাকা কোনো নির্দিষ্ট আইডি যুক্ত ট্যাগ স্টাইল করার জন্য আইডি সিলেক্টর ব্যবহার করা হয়। আইডি সিলেক্টর আইডি এর নাম অনুসারে হয় এবং এর সামনে একটি হ্যাস(#) বসে। যেমন আমি যদি myid যুক্ত কোনো ট্যাগ স্টাইল করতে চাই তাহলে নিচের মত করে সিএসএস সিলেক্টর নিতে হবে। তবে এটা মনে রাখবেন কোনো আইডি কে সংখ্যা দিয়ে চিহ্নিত করতে চাইলে কোনো ভাবেই আইডি নেম সংখ্যা দিয়ে শুরু করা যাবে না। সংখ্যা সবসময় শেষে দিতে হবে (যেমন #myid1)।


#myid {
	text-align: center;
	color: red;
}


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

এইচটিএমএল এর থাকা কোনো নির্দিষ্ট ক্লাস নেম যুক্ত ট্যাগ স্টাইল করার জন্য ক্লাস সিলেক্টর ব্যবহার করা হয়। ক্লাস সিলেক্টর ক্লাস এর নাম অনুসারে হয় এবং এর সামনে একটি ডট(.) বসে। যেমন আমি যদি myclass যুক্ত কোনো ট্যাগ স্টাইল করতে চাই তাহলে নিচের মত করে সিএসএস সিলেক্টর নিতে হবে।


.myclass {
	text-align: center;
	color: red;
}


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

আপনি যদি একই সিএসএস দিয়ে HTML ডকুমেন্ট এ থাকা সকল এলিমেন্ট গুলো একই রকম ডিজাইন করতে চান তাহলে ইউনিভার্সাল সিলেক্টর নিতে হবে। ইউনিভার্সাল সিলেক্টর সর্বদা স্টার(*) ক্যারেকটার হয়। যেমন আমি সকল এলিমেন্ট এর প্যাডিং এবং মার্জিন শূন্য করতে চাই তাই ইউনিভার্সাল সিলেক্টর নিয়ে প্যাডিং এবং মার্জিন শূন্য দিলাম।


* {
	padding: 0;
	margin: 0;
}


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

আপনি যদি একাধিক এলিমেন্ট একই স্টাইল করতে চান তাহলে গ্রুপিং সিলেক্টর ব্যবহার করতে হবে। গ্রুপিং সিলেক্টর এ কমা দিয়ে একটির পর একটি সিলেক্টর লিখতে হয়। যেমন আমি h 1 এবং h 2 এর স্টাইল একই রকম করতে চাই তাই আমি h 1 এবং h 2 গ্রুপ আকারে নিলাম। গ্রুপ এর মধ্যে আপনি এলিমেন্ট, আইডি, ক্লাস, ইউনিভার্সাল সব ধরনের সিলেক্টর গ্রুপিং করতে পারেন।


h2, h2 {
	text-align: center;
	color: red;
	font-size: 25px;
	font-weight: bold;
}


তো বন্ধুরা এই ছিলো আজকের আর্টিকেল। সিলেক্টর নিয়ে কোনো কনফিউশন থাকলে নিচে কমেন্ট করুন। আর নিজে একটু প্র্যাকটিস করবেন। তাহলে স্ট্রাকচার গুলো মনে থাকবে, ধন্যবাদ।

Post a Comment

0 Comments