HTML class Attribute

In this tutorial, you will learn HTML class Attribute

HTML class attribute is used to define a class for an HTML element, which can be used to apply CSS styles to multiple elements at once.

To create a class, use the “class” attribute in the opening tag of an HTML element. For example:

<div class="myclass">

You can also assign multiple classes to a single element by separating them with a space. For example:

<div class="myclass1 myclass2">

In your CSS file, use a “.” followed by the class name to define the styles for that class. For example:

.myclass1 {
    color: blue;
}

To apply the class to multiple elements, simply use the same class attribute on the desired elements. For example:

<div class="myclass">This is a div with the class "myclass"</div>
<p class="myclass">This is a paragraph with the class "myclass"</p>

Note: HTML class names are case-insensitive, but CSS class selectors are case-sensitive.

Here is an example of a complete HTML and CSS that uses a class attribute:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

In this example, the class “highlight” is used to apply a yellow background color to the second paragraph.

You can use class attribute to apply CSS styles to multiple elements at once and make your webpage more interactive and dynamic.