HTML Class
HTML Class
This is the lesson 9 of 10 in the course HTML - Beginner to Advance

The class is an attribute that specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. Multiple HTML elements can share the same class.
The class name can be used by CSS and JavaScript to do some tasks for HTML elements.

Table of Contents

HTML Class Attribute

To use a class attribute in CSS, we need to use point (.) before the class name. We can also use this in javascript.

How to create class in HTML

for creating the class in HTML we need to create an element and use class attribute in opening tag and the value of the class can be anything.

<div class="myDiv">
</div>


here in the above example, we are using a div tag with the class attribute, the name of the class in “myDiv” it can be anything you want like “box”, “myfirstdiv”, etc.

Class Naming Rules

  • Must begin with a letter A-Z or a-z
  • cannot be start with a digit
  • no space allowed in the class name ( for space we can use hypnes (-) or underscore( _ ).

Using Class in CSS

In CSS, we can use a class using the dot (.) operator before the class name.
.className{}

internal CSS should be written inside the <style> and </style> tag.

<!DOCTYPE html>
<html>
<head>
<style>
.heading {
  background-color: red;
  color: white;
  padding: 12px;
}
</style>
</head>
<body>
	<h2 class="heading">my first heading</h2>
    <h2>my second heading</h2>
</body>
</html>

here in this example, we have created two h2 elements but in the first one, we give a class attribute with the class name “heading”. in the style tag we have used this class name with a dot operator. And give the background color as re, text color as white, and padding set to 12px. Run the code you see the output!

Multiple Classes

as we learned, how to create a class. Using this we can create multiple classes in different elements. The example is given below. Just run the code!

<!DOCTYPE html>
<html>
<head>
<style>
.heading {
  background-color: red;
  color: white;
  padding: 12px;
}
.paragraph {
  background-color: red;
  color: white;
  padding: 12px;
}
.secondParagraph {
  background-color: red;
  color: white;
  padding: 12px;
}
</style>
</head>
<body>
	<h2 class="heading">my first heading</h2>
    <p class="paragraph">my first paragraph.</p>
    <p class="secondParagraph"> my second paragraph.</p>
</body>
</html>

Here we learned, how we can create multiple classes, but here we used the same style code for all three classes, but the question is “How we can use the same code for different classes?”.

Apply same style for Different Classes

If we can apply the same code for a different class, we can save the code space. Here the option is comma (,) operator. we can use a comma between every class name to differentiate them and write the same code for all.

<!DOCTYPE html>
<html>
<head>
<style>
.heading,
.paragraph,
.secondParagraph {
  background-color: red;
  color: white;
  padding: 12px;
}
</style>
</head>
<body>
	<h2 class="heading">my first heading</h2>
    <p class="paragraph">my first paragraph.</p>
    <p class="secondParagraph"> my second paragraph.</p>
</body>
</html>

Same Class in Different Elements

we can also use the same class name in different elements. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
.bgRed {
  background-color: red;
  color: white;
  padding: 12px;
}
</style>
</head>
<body>
	<h2 class="bgRed">my first heading</h2>
    <p class="bgRed">my first paragraph.</p>
    <p class="bgRed"> my second paragraph.</p>
</body>
</html>

Here we have created a single class “bgRed” for multiple elements. Run the Code!

Multiple Classes in a Single Element

We can also create multiple classes in a single tag or element. For creating multiple classes in a single tag give the space between every class.

<!DOCTYPE html>
<html>
<head>
<style>
.bgRed {
  background-color: red;
  color: white;
  padding: 12px;
}
.borderBlue{
	border:3px solid blue;
}
.heading{
    text-transform:uppercase;
}
</style>
</head>
<body>
	<h2 class="bgRed borderBlue heading">my first heading</h2>
    <p class="bgRed borderBlue">my first paragraph.</p>
    <p class="bgRed"> my second paragraph.</p>
</body>
</html>

Use Class in JavaScript

We can also use a class in JavaScript. We will create a simple script to change the paragraph text on button click.

<!DOCTYPE html>
<html>
<body>

<p class="p1">Hello World!</p>
<button onclick="changeIt()">Change It</button>

<script>
function changeIt(){
document.getElementsByClassName("p1")[0].innerHTML = "Code Designer World";
}
</script>

</body>
</html>

Here it was our HTML Class tutorial. Hope you learn something new. If you are interested in coding then you can visit our latest articles.

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Course Navigation<< HTML Table
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply