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

This entry is part 8 of 13 in the series সিএসএস
Print Friendly, PDF & Email

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

Pseudo Class Selector:

CSS এ সুডো ক্লাস ইউজ করা হয় কোন ইলিমেন্টকে স্পেশাল ইফেক্ট দেয়ার জন্য। ইফেক্ট দিতে সুডো ক্লাসকে আইডি বা ক্লাস সিলেক্টরের সাথে বা কোন ইলিমেন্ট সিলেক্টরের সাথে কম্বাইন করে ডিক্লেয়ারেশন দিতে হয়। সুডো ক্লাস সাধারণত ইউজ করা হয় কোন ইলেমেন্ট এর সামনে, পিছনে, প্রথম অক্ষর, প্রথম লাইনে ইফেক্ট দেয়ার জন্য, সেটা হতে পারে লিখা দিয়েই অথবা ইমেজ দিয়ে। সুডো ক্লাস ইউজ করে আপনি খুব সহজেই একটি ইলিমেন্টকে অনেক সুন্দর এবং নান্দনিক করে প্রদর্শন করতে পারবেন। পুরো সুডো ক্লাস সিলেক্টরের সিনট্যাক্স ডিক্লেয়ারেশন হবেঃ selector:pseudo-class {property:value;}। সিএসএস এ কয়েক ধরণের সুডো ক্লাস রয়েছে, যেমনঃ

  1. আফটার সুডো ক্লাস (After Pseudo Class),
  2. বিফর সুডো ক্লাস (Before Pseudo Class),
  3. ফার্স্ট লাইন সুডো ক্লাস (First Line Pseudo Class),
  4. ফার্স্ট লেটার সুডো ক্লাস (First Letter Pseudo),
  5. এংকর সুডো ক্লাস (Anchor Pseudo Class),
  6. ফাস্ট চাইল্ড সুডো ক্লাস (First Child Pseudo-class).
  7. লাস্ট চাইল্ড সুডো ক্লাস (Last Child Pseudo-class)

ফাস্ট চাইল্ড সুডো ক্লাস এর ছোট একটি উদাহরণ দিয়ে ব্যাপারটি ক্লিয়ার করিঃ

[html]<html>

<head>

<title>Pseudo Class Example!</title>

<style type=”text/css”>

div p:first-child{

font-family: Tahoma;

font-size: 14px;

color: red;

background: #e8e8e8;

border: 3px solid green;

}

</style>

</head>

<body>

<div>

<p> Welcome to RangpurSource’s CSS Class! This is the Pseudo Class Example. And This Paragraph is about First Child Selector. This Paragraph Should be Styled.</p>

<p>Welcome to RangpurSource’s CSS Class! This is the Pseudo Class Example. This is second Paragraph and This Paragraph is remaining unstyled.</p>

<p>Welcome to RangpurSource’s CSS Class! This is the Pseudo Class Example. This is third Paragraph and This Paragraph also remaining unstyled.</p>

</div>

</body>

</html>

[/html]

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

অন্যান্য সুডো ক্লাস স্টাইল নিয়ে আমি সিএসএস অ্যাডভান্সড সেকশনে বিস্তারিত আলোচনা করবো।

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

Universal Selector:

Universal Selector * (স্টার বা এস্ট্রিক্স ) সাইন দিয়ে প্রকাশ করা হয়। এটি অন্যান্য সিলেক্টর থেকে আলাদা। অন্যান্য সিলেক্টর যেমন এইচটিএমএল ইলিমেন্টকে স্টাইল করে। উনিভার্সাল সিলেক্টর কিন্তু স্টাইল করেনা বরং, ইলিমেন্টের ডিফল্ট স্টাইল রিসেট করে দেয়। যাতে করে ডিজাইনার তাঁর ইচ্ছা মত প্রতিটি ইলিমেন্টের স্টাইল প্রদান করতে পারে। সিএসএস শিখার এই পর্যায়ে শুধু এতটুকু জেনে রাখুন। পর্বর্তিতে আর বিস্তারিত আলোচনা করা হবে। নিচের উদাহরণটি লক্ষ করুন কিভাবেঃ

[html] <html>
<head>
<title>This is an example web page!</title>
</head>
<body>
<div id=”wrapper”>
<header>
<hgroup>
<h2>The Demo Website</h2>
<h3>This is sub title of this website</h3>
</hgroup>
</header>
<nav>
<ul>
<a href=”#”><li>Home</li></a>
<a href=”#”><li>About</li></a>
<a href=”#”><li>Products</li></a>
<a href=”#”><li>Profile</li></a>
<a href=”#”><li>Contact</li></a>
</ul>
</nav>
<div id=”main”>
<section>
<hgroup>
<h2>This is Section Heading</h2>
<h3>This is sub title of Section Heading</h3>
</hgroup>
<article>This is Section 1 area. We can do anything or post anything here.This is Section 1 area. We can do anything or post anything here. This is Section 1 area. We can do anything or post anything here. This is Section 1 area. We can do anything</article>
<span>Design by – Ariful Islam Shaon</span>
</section>
</div>
</div>
</body>
</html>
[/html]

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

এখন আমরা বাই ডিফল্ট প্যাডিং, মার্জিন, বর্ডার, বুলেটস আইকন সব গুলো রিসেট করবো এই উনিভার্সাল সিলেক্টর ইউজ করে। এখানে শুধু মাত্র উপরের এইচটিএমএল ফাইল এর হেড সেকশনে নিচের সিএসএস কোডটি লিখে দিতে হবেঃ

[html]<style type=”text/css”>
*{
border:0px;
padding:0px;
margin: 0px;
}
</style>
[/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য আগের universalselector.html ফাইলটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না।  এবার Save(Ctrl+S) করুন। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

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

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

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ১ম পর্ব(পরিচিতি)সিএসএস টিউটোরিয়ালঃ ৩য় পর্ব(স্টাইলসীটের ধরন) >>

Leave a Reply

Your email address will not be published. Required fields are marked *

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