সিএসএস সিনট্যাক্স এবং সিলেক্টর
সিএসএস সিনট্যাক্স(CSS Syntax)
সিএসএস সিলেক্টর এবং ডিক্লেয়ারেশন ব্লকের সমন্বয়ে একটি সিএসএস রুল-সেট গঠিত হয়।
আপনি যে এইচটিএমএল এলিমেন্টকে ষ্টাইল করতে চান তাকেই সিএসএস সিলেক্টর বলা হয়।
সিএসএসে এক বা একাধিক ডিক্লেয়ারেশন ব্লক থাকতে পারে। একের অধিক ডিক্লেয়ারেশন ব্লককে সেমিকোলনের মাধ্যমে পৃথক করা হয়।
প্রতিটি ডিক্লেয়ারেশন ব্লকে একটি সিএসএস প্রোপার্টির নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।
প্রতিটি সিএসএস ডিক্লেয়ারেশন ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।
নিচের উদাহরণে সবগুলো <p> এলিমেন্টের জন্য টেক্সটের এলাইনমেন্ট center এবং কালার red সেট করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>এই প্যারাগ্রাফটি <strong>সিএসএস</strong> দ্বারা স্টাইল করা হয়েছে।</p>
<p>এই প্যারাগ্রাফটিও <strong>সিএসএস</strong> দ্বারা স্টাইল করা হয়েছে।</p>
</body>
</html>
ফলাফল
সিএসএস সিলেক্টর
name, id, class, attribute ইত্যাদির উপর ভিত্তি করে বিভিন্ন এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য সিএসএস সিলেক্টরসমূহ ব্যবহার করা হয়।
এলিমেন্ট সিলেক্টর
এইচটিএমএল এলিমেন্টের নামানুসারে এলিমেন্টকে সিলেক্ট করার জন্য এলিমেন্ট সিলেক্টর ব্যবহার করা হয়।
নিচের উদাহরণের মত আপনি একটি পেজের সবগুলো <p> এলিমেন্টকে স্টাইল করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
text-align: center;
color: slateblue;
}
</style>
</head>
<body>
<p>প্রত্যেকটি প্যারাগ্রাফ ট্যাগে একই ধরনের স্টাইল হবে।</p>
<p>এই প্যারাগ্রাফ ট্য্যগটিতেও একই স্টাইল হবে!</p>
<p>এটিতেও একই স্টাইল হবে!</p>
</body>
</html>
ফলাফল
id সিলেক্টর
এইচটিএমএল এলিমেন্টের id এট্রিবিউট ব্যবহার করে যেকোন একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করা হয়।
একটি এলিমেন্টের id এট্রিবিউটের নাম অবশ্যই পেজে শুধুমাত্র একটি থাকতে পারবে। একই নাম দিয়ে একাধিক এলিমেন্টকে সিলেক্ট করতে চাইলে class এট্রিবিউট ব্যবহার করুন।
নির্দিষ্ট id সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে #(হ্যাশ) ক্যারেক্টার তারপরে ঐ এলিমেন্টের আইডির নাম লিখতে হবে।
নিচেে উদাহরণে id এর সাহায্যে একটি এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
#text {
text-align: center;
color: slateblue;
}
</style>
</head>
<body>
<p id="text">এই প্যারাগ্রাফটি স্টাইল করার জন্য id ব্যবহার করা হয়েছে।</p>
<p>এই প্যারাগ্রাফটিতে স্টাইল করা হয়নি।</p>
</body>
</html>
বিঃদ্রঃ id নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।
ফলাফল
class সিলেক্টর
class সিলেক্টরের মাধ্যমে এক বা একাধিক class এট্রিবিউট সম্বলিত এলিমেন্টসমূহ সিলেক্ট করা যায়।
নির্দিষ্ট class সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে .(ডট) ক্যারেক্টার তারপরে ঐ এলিমেন্টের class এর নাম লিখতে হবে।
নিচের উদাহরণে class এট্রিবিউট ব্যবহার করে এলিমেন্ট সিলেক্ট করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.text {
text-align: center;
color: slateblue;
}
</style>
</head>
<body>
<h3 class="text">শিরোনামের লেখাটি slateblue কালার এবং মাঝখানে রয়েছে।</h3>
<p class="text">এই লেখাটিও slateblue কালার এবং মাঝখানে রয়েছে।</p>
</body>
</html>
ফলাফল
এছাড়াও আপনি চাইলে এলিমেন্টের নামের সাথে class সিলেক্টর ব্যবহার করে নির্দিষ্ট এইচটিএমএল এলিমেন্টকে সিলেক্ট করতে পারেন।
নিচের উদাহরণে শুধুমাত্র "text" নামের ক্লাসযুক্ত <p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text {
text-align: center;
color: slateblue;
}
</style>
</head>
<body>
<h3 class="text">শিরোনামটি প্রভাবিত হবে না।</h3>
<p class="text">প্যারাগ্রাফটি slateblue কালার এবং মাঝখানে রয়েছে।</p>
</body>
</html>
ফলাফল
এইচটিএমএল এলিমেন্টের মধ্যে ভিন্ন ভিন্ন কাজের জন্য একের অধিক ক্লাসও ব্যবহার করা যায়।
নিচের উদাহরণে class="text" এবং class="para" অনুসারে <p> এলিমেন্টকে স্টাইল করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.text {
text-align: center;
color: slateblue;
}
p.para {
font-size: 200%;
}
</style>
</head>
<body>
<h2 class="text">শিরোনামটি প্রভাবিত হবে না।</h2>
<p class="text">প্যারাগ্রাফটি slateblue কালার হবে এবং মাঝখানে থাকবে।</p>
<p class="text para">প্যারাগ্রাফটির লিখাগুলো বড় আকারের, slateblue কালারের এবং মাঝখানে থাকবে।</p>
</body>
</html>
বিঃদ্রঃ class নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।
ফলাফল
গ্রুপ সিলেক্টর
আপনি অনেকগুলো এলিমেন্টের একই রকম স্টাইল করতে চাইলে গ্রুপ সিলেক্টর ব্যবহার করতে পারেন। যেমনঃ
h1 {
text-align: center;
color: slateblue;
}
h2 {
text-align: center;
color: slateblue;
}
p {
text-align: center;
color: slateblue;
}
কোডের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করতে হয়। গ্রুপ সিলেক্টরের ক্ষেত্রে সিলেক্টরসমূহকে কমা দ্বারা পৃথক করতে হয়।
নিচের উদাহরণে উপরের কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করে সিলেক্ট করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<head>
<style>
h1, h2, p {
text-align: center;
color: slateblue;
}
</style>
</head>
<body>
<h1>স্যাট একাডেমিতে আপনাদের স্বাগতম!</h1>
<h2>গ্রুপ সিলেক্টরের ব্যবহার</h2>
<p>কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করা হয়।</p>
</body>
</html>
ফলাফল
সিএসএস কমেন্ট
সংক্ষেপে কোডের কাজ ব্যাখ্যা করার জন্য কমেন্ট ব্যবহার করা হয়। কমেন্ট আপনাকে পরবর্তী সময়ে এই কোড নিয়ে কাজ করতে সাহায্য করবে।
ব্রাউজার কখনোই কমেন্ট/কমেন্টসমূহ প্রদর্শন করে না।
সিএসএসে কমেন্ট শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। এই কমেন্ট আবার একাধিক লাইনেরও হতে পারে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
</head>
<style>
p {
color: slateblue;
/* এটি একটি সিংগেল-লাইন কমেন্ট */
text-align: center;
}
/* এটি একটি
মাল্টি-লাইন
কমেন্ট */
</style>
</head>
<body>
<p>এই প্যারাগ্রাফটি সিএসএস দ্বারা স্টাইল করা হয়ছে।</p>
<p>সিএসএস এর কমেন্টগুলো ব্রাউজারে প্রদর্শিত হবে না।</p>
</body>
</html>
ফলাফল