একটি CSS রুল-সেটে একটি সিলেক্টর এবং একটি ডিক্লারেশন ব্লক থাকে:
সিলেক্টর সেই HTML এলিমেন্টের দিকে নির্দেশ করে যেটি আপনি স্টাইল করতে চান।
ডিক্লারেশন ব্লকে একটি বা একাধিক ডিক্লারেশন থাকে, যা সেমিকোলন দিয়ে আলাদা করা থাকে।
প্রতিটি ডিক্লারেশনে একটি CSS প্রপার্টির নাম এবং একটি মান থাকে, যা একটি কোলন দিয়ে আলাদা করা থাকে।
একটি CSS ডিক্লারেশন সবসময় একটি সেমিকোলন দিয়ে শেষ হয়, এবং ডিক্লারেশন ব্লক কার্লি ব্রেস দিয়ে ঘেরা থাকে।
এই উদাহরণে সব <p> এলিমেন্ট কেন্দ্রীভূত এবং লাল টেক্সট রঙের হবে:
p {
color: red;
text-align: center;
}CSS সিলেক্টর HTML এলিমেন্টকে তাদের এলিমেন্টের নাম, id, class, অ্যাট্রিবিউট এবং আরও অনেক কিছুর ভিত্তিতে "খুঁজে বের করতে" (বা সিলেক্ট করতে) ব্যবহার করা হয়।
element সিলেক্টর এলিমেন্টের নামের ভিত্তিতে এলিমেন্ট সিলেক্ট করে।
আপনি এভাবে একটি পেজের সব <p> এলিমেন্ট সিলেক্ট করতে পারেন (এখানে, সব <p> এলিমেন্ট কেন্দ্রীভূত এবং লাল টেক্সট রঙের হবে):
p {
text-align: center;
color: red;
}id সিলেক্টর একটি নির্দিষ্ট এলিমেন্ট সিলেক্ট করতে HTML এলিমেন্টের id অ্যাট্রিবিউট ব্যবহার করে।
একটি এলিমেন্টের id একটি পেজের মধ্যে ইউনিক হওয়া উচিত, তাই id সিলেক্টর একটি ইউনিক এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়!
নির্দিষ্ট id-যুক্ত একটি এলিমেন্ট সিলেক্ট করতে, একটি হ্যাশ (#) চিহ্ন লিখে তারপর এলিমেন্টের id লিখতে হয়।
নিচের স্টাইল নিয়মটি id="para1" থাকা HTML এলিমেন্টে প্রয়োগ হবে:
#para1 {
text-align: center;
color: red;
}মনে রাখবেন: id-এর নাম সংখ্যা দিয়ে শুরু হতে পারবে না!
class সিলেক্টর নির্দিষ্ট class অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করে।
নির্দিষ্ট class-যুক্ত এলিমেন্ট সিলেক্ট করতে, একটি ডট (.) চিহ্ন লিখে তারপর class-এর নাম লিখতে হয়।
এই উদাহরণে class="center" থাকা সব HTML এলিমেন্ট লাল এবং কেন্দ্রীভূত হবে:
.center {
text-align: center;
color: red;
}আপনি এটাও নির্ধারণ করতে পারেন যে শুধু নির্দিষ্ট HTML এলিমেন্টের উপর একটি class প্রভাব ফেলবে।
এই উদাহরণে শুধু class="center" থাকা <p> এলিমেন্ট কেন্দ্রীভূত হবে:
p.center {
text-align: center;
color: red;
}HTML এলিমেন্ট একাধিক class-ও নির্দেশ করতে পারে।
এই উদাহরণে <p> এলিমেন্ট class="center" এবং class="large" অনুযায়ী স্টাইল হবে:
<p class="center large">This paragraph refers to two classes.</p>মনে রাখবেন: class-এর নাম সংখ্যা দিয়ে শুরু হতে পারবে না!
একই স্টাইল ডেফিনিশনসহ যদি আপনার এলিমেন্ট থাকে, এভাবে:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}কোড কমাতে সিলেক্টরগুলো গ্রুপ করা ভালো।
সিলেক্টর গ্রুপ করতে, প্রতিটি সিলেক্টরকে একটি কমা দিয়ে আলাদা করুন।
এই উদাহরণে আমরা উপরের কোডের সিলেক্টরগুলো গ্রুপ করেছি:
h1, h2, p {
text-align: center;
color: red;
}কোড ব্যাখ্যা করতে কমেন্ট ব্যবহার করা হয়, এবং পরবর্তীতে সোর্স কোড এডিট করার সময় এটি সাহায্য করতে পারে।
ব্রাউজার কমেন্ট উপেক্ষা করে।
একটি CSS কমেন্ট /* দিয়ে শুরু হয় এবং */ দিয়ে শেষ হয়। কমেন্ট একাধিক লাইনজুড়েও হতে পারে:
p {
color: red;
/* এটি একটি সিঙ্গেল-লাইন কমেন্ট */
text-align: center;
}
/* এটি একটি
মাল্টি-লাইন
কমেন্ট */