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> <h2 class=”Tutorials”>OS</h2> <p>Operarting System</p> </body> |
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> |
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> |
