আমরা html ট্যাগের ভিতরে CSS ব্যাবহার করার জন্য <div>...</div> ট্যাগ ব্যাবহার করি ।
এখন প্রশ্ন হল <div>...</div> ট্যাগ কিভাবে ব্যাবহার করতে হয় ।
<div>...</div> ট্যাগ ব্যাবহার করার জন্য আমরা class বা id নিই ।
class নেওয়ার জন্য <div class="class name">.........</div> এবং
id নেওয়ার জন্য <div id="id name">.........</div>
উদাহরণ <div class="aform">IMG</div>
এবং <div id="aform">IMG</div>
এছাড়া আমরা <span>....</span> ট্যাগ ব্যাবহার করি ট্যাগের বিভিন্ন action এর জন্য
যেমন পেজ রিফ্রেশ submit এর পরের action ইত্যাদি কাজের জন্য আমরা span ট্যাগ ব্যাবহার করি ।
<span>....</span> ট্যাগ ব্যাবহার করার জন্য আমরা class নিই
যেমন <span class="class name">....</span>
এখন দেখব css এ কিভাবে id ও class নিতে হয়
class ও id নেওয়ার নিয়ম ;
class নেওয়ার জন্য (.)class name{ }
এবং প্রতিটা action এর শেষে (;) দিয়ে শেষ করতে হবে ।
উদাহরণ .aform{
color: #08D8FA;
}
এবং id নেওয়ার জন্য (#)id name{ }
এবং প্রতিটা action এর শেষে (;) দিয়ে শেষ করতে হবে ।
উদাহরণ #aform{
color: #3DE508;
}
এবার internal css এর উদাহরণ দেখি
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta charset="utf-8">
<title>bong71.blogspot.com</title>
<style>
#aform{
color: #3DE508;
}
.aform{
color: #08D8FA;
}
</style>
</head>
<body>
<html>
<div class="aform">
Hello World !
</div>
<div id="aform">
Hello World !
</div>
</body>
</html>
এই উদাহরণটি দেখে অনেকে ভাবছে class এবং id এর কাজ একই । কিন্তু না
id এর উদাহরণ দেখাতে গেলে বলা যায় id হল মোবাইলের All Select আর class হল Select আশা করি সবাই বুঝতে পেরেছেন ।
এই উদাহরণটি দেখলে বুঝতে পারব
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta charset="utf-8">
<title>bong71.blogspot.com</title>
<style>
#aform{
color: #3DE508;
}
.aform{
color: #08D8FA;
}
</style>
</head>
<body>
<html>
<div class="aform">
Hello World !
<div id="aform">
Hello World !
</div>
I am New User
<br>
You Understand
</div>
</body>
</html>
এখানে I am New User এবং You Understand এই লেখাগুলোতে আমি
কোনো div ব্যাবহার করি নায় ,
তার পরেও লেখাগুলোর কালার পাল্টে গিয়েছে এর কারণ হল আমি প্রথমেই div id ব্যাবহার করেছি ।
আর মাঝের Hello world ! এর কালার পরিবর্তনের কারণ হল আমি আলাদা div class ব্যাবহার করেছি ।