HTML class

Class
  • Class ekak Css walata ekathu kirimedi class name ekata kalin . bawitha karay
  • ekama Class name eka html element kihipayakata bawitha kala hekiya
  • class attribute eka බොහෝ විට භාවිතා කරන්නේ style sheet එකක class name එකක් පෙන්වීමට ha JavaScript එකකට නිශ්චිත class name සහිත elements  වෙත ප්‍රවේශ වීමට සහ හැසිරවීමටද භාවිතා කළ හැක.
  • ClSS
  • Class attribute ඕනෑම HTML Element ekaka භාවිතා කළ හැක.
Class
<html>
<style>

.one1 {
  background-color: rgb(88, 88, 117);
  color: rgb(255, 255, 255);
  font-size: 100%;
}

.one2{
  background-color: brown;
  color: black;
  font-size: 120%;
}

.one3{
  color: #c04b07;
  font-weight: 800;
}


</style>

<body>


<div class="one1">
  <h1>Hello World HTML</h1>
  <p>HTML is the first web development language and is Easy to learn.</p>
</div>


<div class="one2">
  <h1>Hello World Css</h1>
  <p>Css is the Second web development language and is Easy to learn.</p>
</div>


<p>Hello <span class="one3" >World</span> im New here</p>


</body>
</html>
Class ekaka name ekak css ekata ekathu karala style karanne mehema
Multiple Class
  • multiple class අර්ථ දැක්වීමට class name eka html element ekakata labadimedi space ekakin wen kala yuthuya
Multiple Class
<html>
<style>


.one{
  background-color: rgb(0, 0, 0);
  color: rgb(163, 42, 42);
  font-size: 40px;
  padding: 10px;
}

.man{
  text-align: center;
}


</style>

<body>


<p class="one man">Hello World HTML</p>

<p class="one">Hello World Css</p>

<p class="one">Hello World Javascript</p>


</body>
</html>
ekama class name eka thiyena class walata samana css ekathu wena athara space eken wen kala namata pamanak wenama css ekathu we
Javascript Class
  • JavaScript හට getElementsByClassName() ක්‍රමය භාවිතයෙන් නිශ්චිත Class name සහිත Html elements වෙත ප්‍රවේශ විය හැක:
Javascript Class
<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>
class ekak javascript ekakata link karanne mehema
Scroll to Top