Class – Simple Class – Multiple Class in HTML and CSS

Last modified on May 27th, 2019 Download This Tutorial in PDF

Class – Simple Class – Multiple Class in HTML and CSS

  1. Class Attribute in HTML
  2. Multiple Classes in HTML
  3. Same Class or Different Tag in HTML
  4. Using JavaScript in HTML

Class Attribute in HTML

<html>
<head>
<style>.Tutorials {
background-color: grey;
color: white;
padding: 20px;
}</style>
</head>
<body><h1>Welcome To T4-Tutorials</h1><h2>Class Attribute:</h2><h2 class=”Tutorials”>HTML</h2><p>Hyper Text Markup Language</p><h2 class=”Tutorials”>CSS</h2>

<p>Cascading Style Sheet</p>

<h2 class=”Tutorials”>OS</h2>

<p>Operarting System</p>

</body>
</html>

Multiple Classes in HTML

<html>
<style>.T4 {
background-color: purple;
color: white;
padding: 15px;
margin: 15px;
}.main{
text-align: center;
}</style>
<body><h1>Welcome To T4-Tutorials</h1><h2>Multiple Classes:</h2><h2 class=”T4 main”>HTML</h2><h2 class=”T4″>CSS</h2>

<h2 class=”T4″>OS</h2>

</body>
</html>

Same Class or Different Tag in HTML

<html>
<style>.T4 {
background-color: purple;
color: white;
padding: 25px;
}</style>
<body><h1>Welcome To T4-Tutorials</h1><h2>Same class different Tag:</h2><h2 class=”T4″>Welcome To T4-Tutorials</h2><p class=”T4″>Thanks For your Love For T4-Tutorials</p></body>
</html>

Using JavaScript in HTML

<html>
<body><h1>Welcome To T4-Tutorials</h1><h2>The class Attribute in JavaScript:</h2><button onclick=”myFunction()”>Hide Elements</button><h2 class=”T”>HTML</h2>
<p>Hyper Text Markup Language.</p><h2 class=”T”>CSS</h2>
<p>Cascading Style Sheet.</p><h2 class=”T”>OS</h2>
<p>Operating Sysytem.</p><script>
function myFunction() {
var x = document.getElementsByClassName(“T”);
for (var i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
}
</script>

</body>
</html>

Subscribe for Friendship

Latest posts by Prof. Fazal Rehman Shamil (see all)