Classes in HTML

Classes in HTML with Examples

In this article, I am going to discuss Classes in HTML with Examples. Please read our previous article where we discussed Heading and Paragraph in HTML with Examples. At the end of this article, you will learn everything about HTML Classes with Examples.

Classes in HTML

In Html, a class attribute is used to define a class for an element. Inside the class attribute, multiple classes can be defined at a time. A class can be defined for any Html element. To access any class ” ” symbol is used.

The class names can be used by CSS to style different elements in Html documents. Same class names can be given to different elements in Html.

<h1 class_attribute = “class_name”> Content </h1>

Class Attribute Syntax in HTML

Classes in HTML with Examples

Multiple Classes in HTML

Multiple Classes in HTML

Multiple classes can be defined inside the Html element. Above you can see a heading tag with a class attribute. Here I have defined three classes inside one class attribute. one can define many classes inside one class attribute. To separate different classes from each other, blank space is used. Classes are mostly used for styling different Html elements.

Class Attribute in CSS

To access a class in CSS (.Class Name) is used.
For example: .htitle
                      .hcolor
                      .hfont

The class attribute is useful if we want to apply the same styling to a group of elements. Below you can see three cards with the same styling. All cards have the same look because the card class is applied to all three divs. Using class attributes saves time as you don’t need to style each and every element separately.

Here we have used internal CSS to write CSS code. Internal CSS is always written inside <style>Tags and placed inside the head tag of the Html document.

Example:
<!DOCTYPE html>
<html>

<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.card {
  background-color: violet;
  color: black;
  border: 1px solid transparent;
  border-radius:10px;
  margin: 10px;
  padding: 25px;
  width:120px;
}
</style>
</head>

<body>

<div class="card">
<h2>CARD1</h2>
<p>This is CARD 1</p>
</div> 

<div class="card">
<h2>CARD2</h2>
<p>This is CARD 2</p>
</div>

<div class="card">
<h2>CARD3</h2>
<p>This is CARD 3</p>
</div>

</body>
</html>
Output:

Class Attribute in CSS

Class Attribute in JavaScript

The class attribute is used in JavaScript to access Html elements.

<!DOCTYPE html>
<html>
<body>

  <li class="child">Coffee</li>
  <button onclick="myFunction()">Try it</button>

<script>
  function myFunction() {
    var list = document.getElementsByClassName("child")[0].innerHTML = "Milk";
  }
</script>

</body>
</html>
Output:

Class Attribute in JavaScript

In the example above the value for list li is “Coffee” the moment we click on the button it will change the list value to “Milk”. All these things are made possible by JavaScript DOM methods. You will get to know more about DOM in the JavaScript tutorial.

Same Class with Different Tag

Same Class with Different Tag

The same class can be shared by different elements. Above we have a heading tag and span tag and a class title is applied to both tags.

<!DOCTYPE html>
<html>
<head>
<style>

.title {
  background-color: lightgreen;
  color: #141414;
  padding: 10px;
} 
</style>
</head>
<body>

<h1 class="title">Dot Net Tutorials</h1>
<span class="title">Dot Net Tutorials</span>

</body>
</html>

Here we have used the ” ” symbol to access the title class for styling.

Classes in HTML with Examples

As you can see the same styling is applied to both the elements irrespective of tags. The class attribute can be used to style multiple elements at a time.

In the next article, I am going to discuss Ids in HTML with Examples. Here, in this article, I try to explain Classes in HTML with Examples and I hope you enjoy this HTML Classes with Examples article.

Leave a Reply

Your email address will not be published.