HTML class Attribute

In HTML, the class attribute is used to assign one or more class names to an HTML element. The class attribute is a way to apply styles or define behaviors to a group of elements that share the same class name. Each HTML element can have multiple class names separated by spaces.

Here's the basic syntax for adding a class attribute to an HTML element:

Example

              
<tagname class="classname1 classname2 ...">Content goes here</tagname>

You can click on above box to edit the code and run again.

Output

<tagname>: Represents the HTML element you want to apply the class to (e.g., <div>, <p>, <h1>, etc.).
class="classname1 classname2 ...": The class attribute, where you can specify one or more class names separated by spaces

Example

             
<p class="highlight">This paragraph has a special style.</p>

You can click on above box to edit the code and run again.

Output

In this example, the <p> element has a class attribute with the value "highlight." You can define styles for the "highlight" class in your CSS to apply specific formatting to all elements with that class.

Multiple classes can be applied to an element by separating them with spaces:

Example


<div class="box border rounded">This is a styled box.</div>

You can click on above box to edit the code and run again.

Output

In this example, the <div> element has three class names: "box," "border," and "rounded." Each class name can be used to apply specific styles or behaviors.

CSS rules for styling classes are typically defined in a style block or an external stylesheet:

Example

         
 /* CSS style block or external stylesheet */

.highlight {
     color: red;
     font-weight: bold;
}
                                                       
.box {
   border: 1px solid #ccc;
    padding: 10px;
}

 .border {
     border: 2px solid blue;
}

.rounded {
    border-radius: 5px;
}

You can click on above box to edit the code and run again.

Output

In this CSS example, styles are defined for the "highlight," "box," "border," and "rounded" classes. These styles will be applied to HTML elements with the corresponding class names.

Using the class attribute allows for a modular and organized approach to styling and scripting in HTML, making it easier to manage and maintain code.

Multiple Classes

In HTML, an element can have multiple classes assigned to it by using the class attribute and separating the class names with spaces. This allows you to apply styles or define behaviors for elements that belong to multiple class categories.

Example

              
<div class="class1 class2 class3">Content goes here.</div>

You can click on above box to edit the code and run again.

Output

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

              
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

You can click on above box to edit the code and run again.