Class – Simple Class – Multiple Class in HTML and CSS

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>

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

Buy advertisement space on T4Tutorials

For more details email [email protected]