Class – Simple Class – Multiple Class in HTML and CSS

Class Attribute in HTML
Multiple Classes in HTML
Same Class or Different Tag in HTML
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>

<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>

</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>

Class – Simple Class – Multiple Class in HTML and CSS
By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022