X

X

X

CSS সিনট্যাক্স এবং সিলেক্টর সমূহ


CSS এ কোড লিখার নিয়ম

CSS এ সিলেক্টর দিয়ে আগে ইলামেন্ট সিলেক্ট করা হয় এবং তারপর উক্ত সিলেক্টর বা সিলেক্টরসমূহে স্টাইল প্রয়োগ করা হয়।

CSS selector

সিলেক্টর দিয়ে মূলত কোন HTML ইলামেন্টে স্টাইল প্রয়োগ করা হবে, তা আগে সিলেক্ট করে নেওয়া হয়। যদি CSS এর কোথাও ভুল হয় তবে এর পরবর্তী CSS কোডকে অনেক সময় ভুল হিসেবে অনেক ব্রাউজার বিবেচনা করে।

স্টাইল ব্লক বা ডেক্লারেশন ব্লক এ সেমিকেলান দিয়ে পৃথক করে একাধিক স্টাইল স্টেটমেন্ট পর্যায়ক্রমে লিখা হয়। প্রতিটি স্টেটমেন্টে CSS প্রপার্টি এবং এর সাথে স্টাইল কোড লিখা হয়। এরপর পুরো স্টাইল ব্লককে দ্বিতীয় বন্ধনী দিয়ে আবদ্ধ করা হয়।
নিচের উদাহরণে বর্ণনা করা হয়েছে সকল <p> ইলামেন্টসমূহ center-aligned এবং লাল রং বিশিষ্ট হবে:

Code Example

<style>
p {
    color: red;
    text-align: center;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS এ ইলামেন্ট সিলেক্ট করার পদ্ধতি

CSS selector দিয়ে কোনো ইলামেন্টের name, id, class, attribute ইত্যাদি দিয়ে কাঙ্ক্ষিত ইলামেন্ট সিলেক্ট করা হয়। এরপর তার বা তাদের উপর স্টাইল প্রয়োগ করা হয়।


ইলামেন্ট সিলেক্টর

ইলামেন্টের নামের উপর ভিত্তি করে ইলামেন্ট সিলেক্টর ইলামেন্ট সিলেক্ট করে।
নিচের উদাহরণে দেখানো হয়েছে কোনো পেজে কিভাবে সকল <p> ইলামেন্ট সিলেক্ট করা যায়। এতে সিলেক্টেড সকল <p> ইলামেন্ট সেন্টার এলাইন্ড এবং লাল রং বিশিষ্ট হিসেবে উপস্থাপিত হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


id সিলেক্টর

id selector দিয়ে কোনো ইলামেন্টের id ব্যবহার করে তাকে সিলেক্ট করা হয়। যেহেতু একটি পেজে একই আইডি বিশিষ্ট শুধুমাত্র একটি ইলামেন্ট থাকে, কাজেই এটি দিয়ে একটি ইলামেন্ট সিলেক্ট করা হয়।

আইডি দিয়ে কোনো ইলামেন্টকে সিলেক্ট করার জন্য # ক্যারেক্টরটিকে আইডি এর পূর্বে যুক্ত করে ব্যবহার করতে হবে।

নিচের উদাহরণে দেখানো হয়েছে id=”para1″ বিশিষ্ট ইলামেন্টে কিভাবে সিএসএস স্টাইল প্রয়োগ করতে হয়:

Code Example

<style>
#para1 {
    text-align: center;
    color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: মনে রাখবেন আইডি কখনই সংখ্যা দিয়ে শুরু হয় না। যদি সংখ্যা দিয়ে কোনো ইলামেন্টের আইডির মান লিখে থাকেন তবে তা ভুল হবে।

class সিলেক্টর

এটি দিয়ে ইলামেন্টের ক্লাস ব্যবহার করে ইলামেন্ট সিলেক্ট করা হয়। একই পেজে একই ক্লাস বিশিষ্ট একাধিক ইলামেন্ট থাকতে পারে। কাজেই এটি দিয়ে মূলত একাধিক ইলামেন্ট সিলেক্ট করা হয়।

ক্লাসের নামের পূর্বে ডট (.) ব্যবহার করে এটি ইলামেন্ট সিলেক্ট করে থাকে। নিচের উদাহরণে class=”center” বিশিষ্ট সকল ইলামেন্টে একইসাথে সিএএস স্টাইল প্রয়োগ করার নিয়ম দেখানো হয়েছে।

Code Example

<style>
.center {
    text-align: center;
    color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ধরুন <p>, <div> দুই ধরণের কিছু ইলামেন্টের একই ক্লাস নেম আছে। আর আপনি ওই ক্লাস বিশিষ্ট শুধুমাত্র <p> ইলামেন্টগুলোতে স্টাইল প্রয়োগ করতে চান। এক্ষেত্রে আপনাকে নিচের পদ্ধতি অনুসরণ করতে হবে।

নিচের উদাহরণে class=”center” বিশিষ্ট সকল <p> ইলামেন্টে স্টাইল প্রয়োগ করা হয়েছে।

Code Example

<style>
p.center {
    text-align: center;
    color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

আবার বলছি একসাথে একাধিক ইলামেন্টে সিএসএস স্টাইল প্রয়োগ করার জন্য সিএসএস ক্লাস সিলেক্টর ব্যবহার করা হয়। এই উদাহরণে class=”center” এবং class=”large” বিশিষ্ট সকল <p> ইলামেন্টের উপর সিএসএস স্টাইল প্রয়োগ করা হয়েছে।

Code Example

<style>
p.center {
    text-align: center;
    color: red;
}

p.large {
    font-size: 300%;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: মনে রাখবেন ক্লাসের নাম কখনই সংখ্যা দিয়ে শুরু হয় না। যদি ক্লাসের নাম সংখ্যা দিয়ে শুরু করেন তবে অনাকাঙ্ক্ষিত ভুল হতে পারে!


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

যদি একাধিক ইলামেন্টে একই ধরণের সিএসএস স্টাইল প্রয়োগ করার প্রয়োজন হয় তবে নিচের মত,

h1 {
text-align: center;
color: red;
}h2 {
text-align: center;
color: red;
}

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

তাহলে আপনার উচিৎ হবে সিলেক্টরগুলোকে গ্রুপভিত্তিতে ব্যবহার করা। গ্রুপ ভিত্তিতে ইলামেন্ট সিলেক্ট করার জন্য কমা ব্যবহার করতে হবে। ব্যাপারটি পরিষ্কারভাবে বোঝার জন্য নিচের উদাহরণটি ভালোভাবে লক্ষ্য করুন।

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

Code Example

h1, h2, p {
    text-align: center;
    color: red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS এ কমেন্টের ব্যবহার

কমেন্ট সাধারণত ব্যবহার করা হয়, কোডের ব্যাখ্যা উপস্থাপণের জন্য। এটি ব্যবহার করলে অন্য কেউ যখন আপনরা কোড পড়বে তখন খুব সহজেই বুঝতে পারবে। কমেন্টগুলো ব্রাউজার ব্যবহার করে না। অর্থাৎ, আপনি আপনার কোডে যত কোডই ব্যবহার করুন না কেন এটি ব্রাউজারের উপর কোনো প্রভাব ফেলবে না। কিন্তু যারা আপনার কোড পড়বে, তাদের কাছে এটি সহজেই বোধগম্য হবে।

CSS কমেন্টের শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। একটি কমেন্ট একই সাথে একাধিক লাইনে বিভক্ত হতে পারে।

Code Example

<style>
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
} 

/* This is
a multi-line
comment */
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।