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>

Pr. Fazal Rehman Shamil
Publisher of Internatonal Journal of Software Technology & Science ISSN: 2616- 5325
Instructor, Researcher,SEO expert, Web Master, Article Writer and Poet. Feel free to contact.