Header Ads

HTML Class Atributes এইচটিএমএল class এট্রিবিউট

Image result for html class attributes

এইচটিএমএল class এট্রিবিউট


একাধিক এলিমেন্টকে একই ধরনের স্টাইল করার জন্য এইচটিএমএল class এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল class এট্রিবিউট</title>
  <style>
  .cities {
    background-color:MediumPurple;
    color: white;
    margin: 20px 0 20px 0;
    padding: 25px;
  }
  </style>
</head>
<body>

  <div class="cities">
  <h2>ঢাকা</h2>
  <p> ঢাকা বাংলাদেশের রাজধানী
  এবং ঢাকা বিভাগের প্রধান শহর। ঢাকা একটি
  মেগাসিটি এবং দক্ষিণ এশিয়ার অন্যতম প্রধান শহরও বটে। বুড়িগঙ্গা নদীর তীরে
  অবস্থিত এই শহর বাংলাদেশের বৃহত্তম শহর। ঢাকা
  মহানগর এলাকার জনসংখ্যা প্রায় ১ কোটি ৫০ লক্ষ।</p>
  </div>

  <div class="cities">
  <h2>চাঁদপুর</h2>
  <p>বাংলাদেশের দক্ষিণ-পূর্বাঞ্চলের চট্টগ্রাম
  বিভাগের একটি প্রশাসনিক অঞ্চল। মেঘনা
  নদীর তীরে এ জেলা অবস্থিত। চাঁদপুরের মানুষ আতিথেয়তার জন্য বিখ্যাত।</p>
  </div>

  <div class="cities">
  <h2>রাজশাহী</h2>
  <p>রাজশাহী বাংলাদেশের উত্তরাঞ্চলের
  (উত্তরবঙ্গের) একটি প্রধান শহর। বিখ্যাত পদ্মা নদীর তীরে রাজশাহী শহর অবস্থিত। এটি রাজশাহী বিভাগের বিভাগীয় শহর।</p>
  </div>

</body>
</html>

ফলাফল


ইনলাইন এলিমেন্টে class এট্রিবিউটের ব্যবহার

এইচটিএমএল ইনলাইন এলিমেন্টেও class এট্রিবিউটটি ব্যবহার করা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল class এট্রিবিউট</title>
  <style>
  .note {
    font-size: 120%;
    color: Crimson;
  }
  </style>
</head>
<body>

  <h1>আমার <span class="note">গুরুত্বপূর্ণ</span> শিরোনাম</h1>
  <p>কিছু <span class="note">গুরুত্বপূর্ণ</span> টেক্সট।</p>

</body>
</html>

ফলাফল


No comments

Powered by Blogger.