HTML Class
HTML
The class attribute in HTML is a global attribute used to assign one or more class names to an HTML element.
This attribute allows HTML to select a group of elements.
Elements Selection
The class is a general identification for one or more elements.
It is not necessarily to be unique in a document. Same class name can be used for other elements.
A class is used to apply style or script on the element.
The class is a single name with no space and started with letter, and is case sensitive.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<style>
.c1{
color: white;
background-color:#404040;
padding:20px;
font-size: 20pt;
border-radius: 5px;
}
</style>
</head>
<body>
<p>class Attribute in CSS</p>
<p class="c1">Hello w3context.</p>
<p class="c1">Hello World!</p>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
function m1(x) {
var e = document.getElementsByClassName(x);
e[0].style.color = "white";
e[0].style.backgroundColor = "#404040";
e[0].style.padding = "20px";
e[0].style.fontSize = "20pt";
e[0].style.borderRadius = "5px";
}
function m2(x, y, z, i) {
document.getElementsByClassName(x)[0].style = '';
document.getElementsByClassName(y)[0].style = '';
document.getElementsByClassName(z)[0].style = '';
document.getElementById(i).style = "";
}
function m3(c) {
c.style.backgroundColor = c.innerText;;
//document.getElementById(c.id).style.backgroundColor = c.innerText;
}
</script>
</head>
<body>
<p onclick="m2('c1','c2','c3','a1');">class Attribute in JavaScript (click to clear style)</p>
<p class="c1" onclick="m1('c1');">Hello w3context.</p>
<p class="c2" onclick="m1('c2');">Hello World!</p>
<p class="c3" onclick="m1('c3');">Hello HTML!</p>
<button id="a1" type="button" onclick='m3(document.getElementById("a1"))'>red</button>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
let x = true;
function m1() {
var e = document.getElementsByClassName("c1");
if (x) {
for (var i = 0; i < e.length; i++) {
e[i].style.color = "white";
e[i].style.backgroundColor = "#404040";
e[i].style.padding = "20px";
e[i].style.fontSize = "20pt";
e[i].style.borderRadius = "5px";
}
x = false;
} else {
for (var i = 0; i < e.length; i++) {
e[i].style = "";
x = true;
}
}
}
</script>
</head>
<body>
<p>class Attribute in JavaScript</p>
<p class="c1" onclick="m1();">Hello w3context.</p>
<p class="c1" onclick="m1();">Hello World!</p>
<p class="c1" onclick="m1();">Hello HTML!</p>
</body>
</html>
Click on the "See output" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: class Tag -->
<head>
<title>class Attribute Example</title>
<script>
function m1() {
var e = document.querySelectorAll(".c1,.c2,.c3");
for(var i=0;i<e.length;i++){
e[i].style.color = "white";
e[i].style.backgroundColor = "#404040";
e[i].style.padding = "20px";
e[i].style.fontSize = "20pt";
e[i].style.borderRadius = "5px";
}
}
function m2() {
var e = document.querySelectorAll(".c1,.c2,.c3");
for(var i=0;i<e.length;i++){
e[i].style= "";
}
}
</script>
</head>
<!--<body onload="m1();"> -->
<body>
<p>class Attribute in JavaScript</p>
<button onclick="m1();">Apply style</button>
<button onclick="m2();">Remove style</button>
<p class="c1">Hello w3context.</p>
<p class="c2">Hello World!</p>
<p class="c3">Hello HTML!</p>
</body>
</html>
Click on the "See output" button to see how it works.