How to use CSS in html tag,এইসটিএমএল ট্যাগের ভিতরে সিএসএস এর ব্যাবহারের

 


html ট্যাগের ভিতরে CSS ব্যাবহার

আমরা 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 ব্যাবহার করি নায় , 

Html bassic 

তার পরেও লেখাগুলোর কালার পাল্টে গিয়েছে এর কারণ হল আমি প্রথমেই div id ব্যাবহার করেছি ।


আর মাঝের Hello world ! এর কালার পরিবর্তনের কারণ হল আমি আলাদা div class ব্যাবহার করেছি ।

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.