সিএসএস নিয়ে লেখা প্রথম টিউটোরিয়ালটিঃ সিএসএস টিউটোরিয়াল – সূচনা

এইচটিএমএল এর ট্যাগ গুলোর জন্য আলাদা করে স্টাইল রুল লেখার পাশা পাশি  CSS এ ID এবং Class দিয়ে আমাদের নিজস্ব selector তৈরি করতে পারি। পরে এই selector গুলো যেকোন এইচটিএমএল ট্যাগ/element এর মধ্যে ব্যবহার করতে পারি।

ID দিয়ে এইচটিএমএল এর একটি নির্দিষ্ট ইলিম্যান্টকে স্টাইল দেওয়ার কাজে ব্যবহৃত হয়।

• একটি ইলিম্যান্ট এর জন্য একটি মাত্র ID ব্যবহার করা যায়।
• একটি ID একটি পেইজে মাত্র একবার ব্যবহার করা যায়।

সিএসএস এ id এর রুল গুলো লেখা শুরু করার আগে # চিহ্ন দিতে হয় তারপর id এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ

#myid{

font-size:20px;
color:blue;

...

}

সিএসএস এ লেখা id যেকোন এইচটিএমএল ইলিম্যান্ট  এ সেট করার  জন্য  এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় id=”idname” দিয়ে। যেমনঃ

<h1 id="myid">... </h1>

উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন। 

বিদ্রঃ আমরা সম সময়  উদাহরন হিসেবে Internal style sheet ব্যবহার করব।

কোড গুলোঃ

<!DOCTYPE html>
<head>
<title>ID Example</title>
 <style>
 p {
 color:red;
 }
 #myid {
 color:blue;
 }
 </style>
</head>

<body>
<h1> Hello web! </h1>
<p>This is a paragraph </p>
<p id="myid">This is another paragraph with an id </p>
<p>This is another paragraph with an id </p>
</body>
</html>

উপরের উদাহরনে সব গুলো p ট্যাগ এর রঙ হচ্ছে লাল। কিন্তু আমরা চাচ্ছি যে একটা p ট্যাগ এর রঙ হবে নীল। তাই আমরা p ট্যাগ এর রঙ নীল দিতে চাই তার জন্য একটা id লিখলাম myid দিয়ে। এবং ঐ p ট্যাগ এর মধ্যে id=”myid” দিয়ে সেট করলাম।

অপর দিকে class দিয়ে একের অধিক ইলিম্যান্টকে স্টাইল দেওয়া যায়।

• একই class একের অধিক ইলিম্যান্ট এর মধ্যে থাকতে পারে।
• একই ইলিম্যান্ট এর একের অধিক class থাকতে পারে।

সিএসএস এ class এর রুল গুলো লেখা শুরু করার আগে . [ডট] চিহ্ন দিতে হয় তারপর class এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ

.myclass{

text-align:center;
color:blue;

...

}

সিএসএস এ লেখা class যেকোন এইচটিএমএল ইলিম্যান্ট  এ সেট করার জন্জয ন্য  এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় class=”classname” দিয়ে। যেমনঃ

<p class="myclass">... </p>

আমরা আগেই জানলাম যে একই class একের অধিক ইলিম্যান্ট এ যোগ করা যায়। যেমনঃ

<h1 class="myclass"> .... </h1>

<p  class="myclass"> .... </p>

<h3  class="myclass"> .... </h3>

আবার একের অধিক ক্লাস একই ইলিম্যান্ট এ যোগ করা যায়, আর তার জন্য শুধু মাত্র স্পেস দিয়ে দ্বিতীয় class লিখতে হয়। এভাবে একের অধিক যত গুলো ইচ্ছে তত গুলো লেখা যায়। এর ফলে সব গুলো class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই ঐ ট্যাগ এ প্রয়োগ হবে।    যেমনঃ

<p  class="myclass myclass2"> .... </p>

<p  class="myclass myclass2 myclass3"> .... </p>

উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন। 

কোড গুলোঃ

<!DOCTYPE html>
<head>
<title>ID Example</title>
 <style>
 p {
 color:red;
 }
 .myclass {
 color:blue;
 }

.myclass2 {
 font-size:20px;
 font-weight:bold;
 }
 </style>
</head>

<body>
<h1> Hello web! </h1>
<p>This is a paragraph </p>
<p class="myclass">This is another paragraph with a class </p>
<p>This is another paragraph </p>
<p class="myclass2">This is another paragraph with another class </p>
<p class="myclass myclass2">This is a paragraph with two class</p>

</body>
</html>

উপরে আমরা myclass একটা p ট্যাগ এ সেট করছি। যার রঙ হচ্ছে নীল [color:blue;] ।  আরেকটি class – myclass2 এর ফন্ট সাইজ হচ্ছে ২০ পিক্সেল এবং তা বোল্ড।  [font-size:20px; font-weight:bold;]  তাই এর ভেতরের লেখা গুলোকে বড় করে দেখতে পাচ্ছি।

এবং সবার শেষে আমরা একটি p ট্যাগ এ এক সাথে দুটি class সেট করলাম। তার পরে দুইটি class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই এ p ট্যাগ এ প্রয়োগ হয়েছে।

একাদিক ক্লাস লেখার সুবিধেঃ 

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

আমরা কয়েকটা বক্স তৈরি করব। প্রায় সময়ই ফুটারের বক্স গুলো একটা এক রকমের দেখা যায়। একটা কালো, একটা লাল, আর একটা নীল। বক্স। এখন বক্স এর সাইজ, ফন্ট সাইজ  ইত্যাদি তো একই থাকবে তাই না? আমরা ক্লাসের নাম দিলাম box.

এবার কালো বক্সের ব্যকগ্রাউন্ড হবে কালো, লেখা হবে সাদা। তাই black  নামে একটা ক্লাস লিখলাম। যেখানে শুধু মাত্র ঐ কালো বক্সের জন্যই ব্যবহার করব।

এবার সাদা লাল বক্সের জন্য ব্যকগ্রাউন্ড লাগবে লাল বেঙ কালার হবে সাদা। red নামে একটা ক্লাস লিখলাম। একই ভাবে নীল বক্সের জন্য।

এখন আমরা কালো বক্সের div লিখব এভাবেঃ <div class=”box black”>
লাল বক্সের জন্য div লিখব এভাবে <div class=”box red”>

এভাবে যদি লিখি, আমাদের বক্স এর কোড গুলো বার বার অন্য জাগায় লিখতে হয় না। অনেক গুলো কোড কম লিখতে হয়। তাই ফাইল সাইজ কম হয়। সাইট সহজেই লোড হয়।