CSS Part : 2 - CSS Syntax & Selector.
CSS Syntax —
CSS Selector এবং declaration ব্লকের সমন্বয়ে একটি CSS রুল-সেট গঠিত হয়।
CSS এ এক বা একাধিক declaration ব্লক থাকতে পারে। একের অধিক ডিক্লেয়ারেশন ব্লককে সেমিকোলনের মাধ্যমে আলাদা করতে হয় ।
প্রতিটি declaration ব্লকে একটি css property name ও একটি value থাকে এবং কোলনের মাধ্যমে এদেরকে আলাদা করা হয়।
প্রতিটি css declaration ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং declaration ব্লকসমূহ দ্বিতীয় বন্ধনী ( } ) দ্বারা বেষ্টিত থাকে।
h1 {color:#FF0000; background: #00FF00 }
যেমন : এখানে h1 হচ্ছে — selector.
{color:#FF0000; background: #00FF00 } — হচ্ছে পুরোটোই declaration .
: হচ্ছে — কোলন।
color হচ্ছে — property.
#FF0000 হচ্ছে — value.
; হচ্ছে — separator.
CSS Selector —
যে html element কে style করা হয় তাকেই CSS Selector বলা হয়। name, id, class, attribute ইত্যাদির উপর ভিত্তি করে বিভিন্ন html element কে style করার জন্য CSS Selector সমূহ ব্যবহার করা হয়।
Element Selector —
Html element এর নামানুসারে element কে সিলেক্ট করার জন্য element selector ব্যবহার করা হয়।Example —নিচের উদাহরণে <p> এলিমেন্টের জন্য text এলাইনমেন্ট center এবং কালার red রাখা হয়েছে —
<!DOCTYPE html>
<html>
<head>
<title>CSS এর উদাহরণ</title>
<style>
p { color: white; text-align: center; }
</style>
</head>
<body>
<p> Welcome To Learning CSS Tutorial .</p>
</body>
</html>
 |
| Result |
ID Selector —
Html এলিমেন্টের id attribute ব্যবহার করে যেকোন একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করা হয়।একটি এলিমেন্টের id attribute এর নাম অবশ্যই পেজে শুধুমাত্র একটি থাকতে পারবে। একই নাম দিয়ে একাধিক এলিমেন্টকে সিলেক্ট করতে হলে class attribute ব্যবহার করতে হবে।
তাছাড়া নির্দিষ্ট id সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে #(hashtag) ক্যারেক্টার তারপরে ঐ এলিমেন্টের ID নাম লিখতে হবে।
নিচেে উদাহরণে id এর সাহায্যে একটি এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ
<!DOCTYPE html><html><head><title>CSS এর উদাহরণ</title><style>#text { text-align: center; color: white; }
</style>
</head><body><p id="text">Welcome To Learning CSS Tutorial.</p></body></html>
 |
| Result |
Class Selector —
class সিলেক্টরের মাধ্যমে এক বা একাধিক class attribute সম্বলিত এলিমেন্টসমূহ সিলেক্ট করা যায়।নির্দিষ্ট class সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে .(ডট) ক্যারেক্টার তারপরে ঐ এলিমেন্টের class এর নাম লিখতে হবে।
নিচের উদাহরণে class এট্রিবিউট ব্যবহার করে এলিমেন্ট select করে দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>CSS এর উদাহরণ</title>
<style>
.text { text-align: center; color: red; }
</style>
</head>
<body>
<p class="text">Welcome To Learning CSS Tutorial.</p>
</body>
</html>
 |
| Result |
নিচের উদাহরণে শুধুমাত্র "text" নামের ক্লাসযুক্ত <p> এলিমেন্টকে select করে দেখানো হল —
<!DOCTYPE html>
<html>
<head>
<title>CSS এর উদাহরণ</title>
<style>
p.text { text-align: center; color: lightskyblue; }
</style>
</head>
<body>
<p class="text">Welcome To Learning CSS Tutorial.</p>
</body>
</html>
 |
| Result |
* তাছাড়া html এলিমেন্টের মধ্যে ভিন্ন ভিন্ন কাজের জন্য একের অধিক class অ ব্যবহার করা যায়।
নিচের উদাহরণে class="text" এবং class="para" অনুসারে <p> এলিমেন্টকে স্টাইল করে দেখানো হল —
<!DOCTYPE html>
<html>
<head>
<title>CSS এর উদাহরণ</title>
<style>
p.text { text-align: center; color: lightskyblue; }
p.para { font-size: 200%; }
</style>
</head>
<body>
<p class="text">Introducing CSS Tutorial.</p>
<p class="text para">Welcome To Learning CSS Tutorial.</p>
</body>
</html>
 |
| Result |
Group Selector —
অনেকগুলো এলিমেন্টের একই রকম স্টাইল করতে চাইলে Group Selector ব্যবহার করতে হয় । যেমনঃ
h1 { text-align: center;
color: black; }
h2 { text-align: center;
color: black; }
p { text-align: center;
color: black; }
* আর তাছাড়া কোডের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করা যায় আর সেজন্য সিলেক্টরসমূহকে কমা দ্বারা পৃথক করতে হয়।
নিচের উদাহরণে উপরের কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করে সিলেক্ট করে দেখানো হল ঃ
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
h1, h2, p { text-align: center; color: black; }
</style>
</head>
<body>
<h1>Welcome To Learning CSS Tutorial.</h1>
<h2>Welcome To Learning CSS Tutorial.</h2>
<p>Welcome To Learning CSS Tutorial.</p>
</body>
</html>
 |
| Result |
CSS Comment —
সংক্ষেপে কোডের কাজ ব্যাখ্যা করার জন্য কমেন্ট ব্যবহার করা হয়। যা পরবর্তী সময়ে এই কোড নিয়ে কাজ করতে সাহায্য হয় ।
ব্রাউজার কখনোই কমেন্ট প্রদর্শন করে না।
CSS এ কমেন্ট শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। এই কমেন্ট আবার একাধিক লাইনেরও হতে পারে।
যেমন ঃ
<!DOCTYPE html>
<html>
<head>
<title>CSS এর উদাহরণ</title>
<style>
p { color: red; /* এটি একটি কমেন্ট */
text-align: center; }
</style>
</head>
<body>
<p> Welcome To Learning CSS Tutorial .</p>
</body>
</html>