HTML class Attribute

❮ Previous Next ❯

In HTML, a class attribute is used to define a specific class for an HTML element. This class can then be used as a selector in CSS to apply styles to multiple elements with the same class.

The class attribute is added to the HTML element as an attribute in the opening tag, and the class name is specified as the value of the attribute.

For example:

<p class="text-red">This text will be red.</p>

In this example, the text-red class is being applied to the <p> element. In a CSS file, the following rule can be used to target the element and change its color to red:

.text-red {
  color: red;
}

In this case, the dot . before the class name means it is a class, it can be directly used in css selector.

class Attribute

You can use the class attribute with internal CSS in HTML by defining the CSS styles inside a <style> element, which should be placed in the <head> section of the HTML document.

Once the CSS styles are defined, you can use the class attribute to apply them to specific HTML elements.

For example, the following HTML defines a CSS class called text-red inside a <style> element and then applies it to a <p> element:

<!DOCTYPE html>
<html>

<head>
  <style>
  .text-red {
    color: red;
  }
  </style>
</head>

<body>
  <p class="text-red">This text will be red.</p>
</body>

</html>

In this example, text-red is a class defined inside <style> tag and is applied on <p> tag, so that text inside <p> will be red.

Using Multiple Classes

You can use multiple classes on a single HTML element by specifying the class names separated by spaces in the class attribute of the element.

For example, the following HTML applies two CSS classes, text-red and big-size, to a <p> element:

<p class="text-red big-size">This text will be red and big.</p>

In the CSS, you can define styles for each of the class separately and it will be applied to the element.

<style>
  .text-red {
    color: red;
  }
  .big-size {
    font-size: 2em;
  }
</style>

In this example, the text-red class will make the text red and the big-size class will make the text big.

Please note that multiple class separated by space will be considered as individual class and CSS will be applied accordingly. As a result, all the styles of those classes will be combined together and applied on the element.

class Attribute with JavaScript

You can use the class attribute with JavaScript by selecting the HTML elements that have a specific class and then applying changes to them.

The document.getElementsByClassName() method can be used to select elements with a specific class, and the classList property can be used to modify the classes on an element.

For example, the following JavaScript code selects all elements with the class text-red and changes their color to blue:

var elements = document.getElementsByClassName("text-red");
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = "blue";
}

This code, first select all the elements having class text-red using getElementsByClassName method and then iterating over each elements and updating its style color property to blue.

You can also use classList property to add/remove classes on elements.

element.classList.add('new-class'); // adds a class to the element
element.classList.remove('old-class'); // removes a class from the element
element.classList.toggle('some-class'); // toggle the existence of class on the element

You can also directly read or set the className property on an element, but classList provides more flexibility with the classes.

In addition to above examples, it is important to keep in mind that the JavaScript file should be loaded after the elements are loaded in the DOM.

So, if you include the script tag in the head, it will not find any elements to update their styles and className.

Therefore, you should load your javascript file at the end of the body to make sure that all elements are already loaded before the script runs.

Can different elements share the same class?

Yes, different elements can share the same class in HTML. When a class is defined, it can be applied to any number of elements on a page.

For example, if you want to make all the paragraphs in a page with blue color you can create a class called blue-text and apply it to all the <p> element like:

<p class="blue-text">This text will be blue</p>
<p class="blue-text">This text will be also blue</p>
<p class="blue-text">This text will be also blue</p>

This way all the <p> elements will have the same class blue-text and CSS rule like:

.blue-text {
  color: blue;
}

This code will make the text blue for all the elements having class blue-text.

You can also apply same class to different type of elements like <p> and <h1> or <div>.

<p class="blue-text">This text will be blue</p>
<h1 class="blue-text">This text will be also blue</h1>
<div class="blue-text">This text will be also blue</div>