Class Attribute

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,061,916
3.	Videos	353,254
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Class Attribute

Using The class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.school {background-color: tomato;color: white;border: 2px solid black;margin: 20px;padding: 20px;}
</style>
</head>
<body>
<div class="school">
<h2>GSSS KHOKHAR</h2>
<p>GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>
</div> 

<div class="school">
<h2>GHS HARAZ</h2>
<p>GOVT. HIGH SCHOOL, HARAZ</p>
</div>

<div class="school">
<h2>GSSS SARAINAGA</h2>
<p>GOVT.SEN.SEC.SCHOOL, SARAINAGA</p>
</div>

</body>
</html>

Live Demo & Try it yourself!

#HTML #class

class on span elements

In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<title>class on span elements</title>
<style>
.note {font-size: 120%;color: red;}
</style>
</head>
<body>

<h1>GSSS <span class="note">KHOKHAR</span></h1>
<p>Sri <span class="note">Muktsar</span> Sahib</p>

</body>
</html>

Live Demo & Try it yourself!

#HTML #span #class

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

<!DOCTYPE html>
<html>
<head>
<title>class on headers</title>
<style>
.school {background-color: tomato;color: white;padding: 10px;}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "school":</p>

<h2 class="school">GSSS KHOKHAR</h2>
<p>GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>

<h2 class="school">GHS HARAZ</h2>
<p>GOVT. HIGH SCHOOL, HARAZ</p>

<h2 class="school">GSSS SARAINAGA</h2>
<p>GOVT.SEN.SEC.SCHOOL, SARAINAGA</p>


</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #class

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.school {background-color: tomato;color: white;padding: 10px;}
.main {text-align: center;}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "school":</p>

<h2 class="school main">GSSS KHOKHAR</h2>
<p>GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>

<h2 class="school">GHS HARAZ</h2>
<p>GOVT. HIGH SCHOOL, HARAZ</p>

<h2 class="school">GSSS SARAINAGA</h2>
<p>GOVT.SEN.SEC.SCHOOL, SARAINAGA</p>


</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #multiple classes

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the same style:

<!DOCTYPE html>
<html>
<head>
<title>Two elements - one class</title>
<style>
.school {background-color: tomato;color: white;padding: 10px;}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

<h2 class="school">GSSS KHOKHAR</h2>
<p class="school">GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #class

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

<!DOCTYPE html>
<html>
<head>
<title>class in JavaScript</title>
<style>
.school {background-color: tomato;color: white;padding: 10px;}
</style>
</head>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "school":</p>


<button onclick="myFunction()">Hide elements</button>

<h2 class="school">GSSS KHOKHAR</h2>
<p>GOVT.SEN.SEC.SCHOOL, KHOKHAR</p>

<h2 class="school">GHS, HARAZ</h2>
<p>GOVT. HIGH SCHOOL, HARAZ</p>

<h2 class="school">GSSS SARAINAGA</h2>
<p>GOVT.SEN.SEC.SCHOOL, SARAINAGA</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("school");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>


</body>
</html>

Live Demo & Try it yourself!