Java Training School

HTML class Attribute

The HTML class attribute is used to specify a class name for an HTML element.The class name can be used by CSS and JavaScript to do some tasks for HTML elements.

A class attribute can be defined within the <style> tag or in a separate file using the (.) character.

Multiple HTML elements can share the same class.

In the following example, we have a <div> elements with a class attribute with the value “color.”. The <div> elements will be styled by the color attribute:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.color {
  background-color: tomato;
  color: white;
  border: 2px solid red;
  width: 33.33%;
}
</style>
</head>
<div class="color">
    <h2>Div 1, using class attribute</h2>
    <p>HTML Essentials: Your Gateway to Web Mastery</p>
    <p>Allow syntax highlighting for custom tags in HTML.</p>
</div>
</html>

Output:

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Multiple Classes

One HTML element can belong to multiple classes (more than one).

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 color class and also to the center class, and will get the CSS styles from both of the classes:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.color {
  background-color: tomato;
  color: white;
  border: 2px solid red;
  width: 33.33%;
}
.center{
  text-align: center;
}
</style>
</head>
<body>

    <h2 class="color center">Div 1, using class attribute</h2>
    <p>HTML Essentials: Your Gateway to Web Mastery</p>
    <p>Allow syntax highlighting for custom tags in HTML.</p>
  
</body>
</html>

Output:

Different Elements Can Use the Same Class.

Different HTML elements can refer to the same class name.
In the following example, both <h2> and <p> point to the “city” class and will share the same style:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.color {
  background-color: tomato;
  color: white;
  border: 2px solid red;
  width: 33.33%;
}
.center{
	 text-align: center;
}
</style>
</head>
<body>

    <h2 class="color center">Div 1, using class attribute</h2>
    <p class="color">HTML Essentials: Your Gateway to Web Mastery</p>
    <p class="color">Allow syntax highlighting for custom tags in HTML.</p>
  
</body>
</html>

Output:

<—Previous
Next—>