HomeWeb DesignHTMLHTML class Attribute: Definition, How to use, Syntax

HTML class Attribute: Definition, How to use, Syntax

HTML class Attribute: Definition, How to use

Definition: The HTML class attribute defines one or more class names for a single element. The class attribute can be used to make changes in the style sheet and JavaScript. in CSS, we donate class with a dot (.).

Syntax:

class=”class name”

Class name can have more than one names and can be used for different purpose.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.test {
  background-color: blue;
  color: white;
  border: 2px solid red;
  margin: 30px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="test">
<h2> HTML </h2>
<p> Hyper Text Markup Language </p>
</div> 

<div class="test">
<h2> Use of HTML </h2>
<p> HTML is used for creating Web pages. </p>
</div>

<div class="test">
<h2>Learn HTML With @ PrepareExams </h2>
<p>HTML Tutorials are here to learn</p>
</div>

</body>
</html>

You can specify different classes for different sections or paragraphs. for Example:

<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
  background-color: blue;
  color: white;
  border: 2px solid red;
  margin: 30px;
  padding: 10px;
}
.test2 {
  background-color: black;
  color: white;
  border: 2px solid red;
  margin: 30px;
  padding: 10px;
}
.test3 {
  background-color: purple;
  color: white;
  border: 2px solid red;
  margin: 30px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="test1">
<h2> HTML </h2>
<p> Hyper Text Markup Language </p>
</div> 

<div class="test2">
<h2> Use of HTML </h2>
<p> HTML is used for creating Web pages. </p>
</div>

<div class="test3">
<h2>Learn HTML With @ PrepareExams </h2>
<p>HTML Tutorials are here to learn</p>
</div>

</body>
</html>

Span element with a class attribute

You can use element with a class attribute to style differently. as you can see in example below.

<!DOCTYPE html>
<html>
<head>
<style>
.imp {
  color: red;
}
</style>
</head>
<body>

<h1> Learn HTML <span class="imp"> PrepareExams </span> Team</h1>

<p> All HTML Tutorials <span class="imp"> are available </span> for practice here.</p>

</body>
</html>

- Advertisment -

Latest Articles