সিএসএস টিউটোরিয়ালঃ ৫ম পর্ব(সিলেক্টরস পার্ট-২)

3
585 বার দেখা হয়েছে।

সিএসএস সিলেক্টর নিয়ে ২এ পর্বে স্বাগতম। এই পর্বে আলোচনা করবো আইডি এবং ক্লাস সিলেক্টর নিয়ে। তো চলুন…

ID Selector:

সিএসএস ID Selector “#” (হ্যাশ) সাইন সাথে কোন একটি সিঙ্গেল স্ট্রিং(ওয়ার্ড) বা ডাবল স্ট্রিং একসাথে দিয়ে প্রকাশ করা হয়। যেমনঃ #myStyle। পুরো আইডি সিলেক্টরের সিনট্যাক্স হয় #myStyle{propertiy:value;}। ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এবং p ট্যাগ উভয়ের কালার লাল (red), এবং font এর সাইজ 30px করতে চাইছেন। h2 ট্যাগ এবং p ট্যাগ উভয়ের জন্য একই ডিক্লেয়ারেশন প্রকাশ করতে হলে আপনাকে একটি আইডি দিয়ে ডিফাইন করে দিতে হবে। তাহলে এইচটিএমএল পেজে হেড সেকশনে সিএসএস স্টাইল কোড এবং বডি সেকশনে h2 এবং p ট্যাগের মধ্যে উক্ত myStyle আইডি অ্যাট্রিবিউট  id=”myStyle” আইডি কল করতে হবে নিচের মতোঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন idselector বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

Class Selector:

সিএসএস Class Selector আর ID Selector প্রায় একই। যেমনঃ ID selector এর # এর জায়গায় Class Selector এর ক্ষেত্রে শুধু “.” (ডট বা প্রিয়ড) সাইন সাথে কোন একটি সিঙ্গেল স্ট্রিং(ওয়ার্ড) বা ডাবল স্ট্রিং একসাথে দিয়ে প্রকাশ করা হয়। যেমনঃ .myStyle। পুরো ক্লাস সিলেক্টরের সিনট্যাক্স হয় .myStyle{propertiy:value;}। একইভাবে ধরুনঃ আপনি এইচটিএমএল এর h2 ট্যাগ এবং p ট্যাগ উভয়ের কালার লাল (red), এবং font এর সাইজ 30px করতে চাইছেন। h2 ট্যাগ এবং p ট্যাগ উভয়ের জন্য একই ডিক্লেয়ারেশন প্রকাশ করতে হলে আপনাকে একটি আইডি দিয়ে ডিফাইন করে দিতে হবে। তবে, class ইউজ করার ফলে আপনি একই সাথে একাধিক ক্লাস একটা সেকশনে ইউজ করতে পারবেন কিন্তু id এর ক্ষেত্রে একটার বেশি ইউজ করতে পারবেন না। এইচটিএমএল পেজে হেড সেকশনে সিএসএস স্টাইল কোড এবং বডি সেকশনে h2 এবং p ট্যাগের মধ্যে উক্ত myStyle ক্লাস অ্যাট্রিবিউট class=”myStyle” লিখে কল করতে হবে নিচের মতোঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন idselector বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে। এক্ষেত্রে আইডি সিলেক্টরে যা ভিউ করেছিল ক্লাস সিলেক্টরের ক্ষেত্রেও একই ভিউ করবে…

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। :)

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১)সিএসএস টিউটোরিয়ালঃ ষষ্ঠ পর্ব(সিলেক্টরস পার্ট-৩) >>
Print Friendly, PDF & Email

3 COMMENTS

  1. খুব সুন্দর হচ্ছে। মধ্যপথে থেমে যাবেন না। ইনশাল্লাহ এক্সপার্ট হয়ে যাবো। আপনাকে অসংখ্য ধন্যবাদ।.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.