HTML Class

The class property is used to define the class of an HTML element.

Several HTML elements could have the same class.

utilizes the class attribute.

When addressing a class name in a style sheet, the class attribute is often used. It may also be used by JavaScript to communicate with items that belong to the given class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Class Example</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to Technalay</h1>
    <p>This is a <span class="highlight">highlighted</span> text example.</p>
    <p>You can use CSS classes to style specific elements on your webpage.</p>
</body>
</html>
HTML

This example uses a <style> tag in the HTML document’s <head> section to determine the CSS class “highlight”. The class property is then used to apply this class to the <span> element contained within a paragraph. The “highlight” class’s CSS specifications specify that the background color should be changed to yellow and that the text should be bold. As a result, the “highlighted” content in the paragraph will have the chosen styling.

Note

Any HTML element can utilise the class property.
Remember that the class name has case sensitivity!

Multiple Class in HTML

HTML components can belong to many classes.

Using the class property in HTML, you can give an element many classes. This enables you to merge styles from many CSS classes and apply them to the same element. When you wish to apply many sets of styles to an element without repeating code, using multiple classes might be useful.

Defined CSS Class

.my-class1 {
  /* Styles for class 1 */
}

.my-class2 {
  /* Styles for class 2 */
}

.my-class3 {
  /* Styles for class 3 */
}
HTML

Apply Multiple Classes

In your HTML, use the “class” attribute to assign multiple classes to an element. Separate the class names with spaces. For example:

<div class="my-class1 my-class2 my-class3">This div has multiple classes.</div>
HTML

In this example, the element has been assigned three classes: “my-class1”, “my-class2”, and “my-class3”. The styles defined in all three classes will be applied to this element.

Example of Multiple Class

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Class Example</title>
  <style>
    .my-class1 {
      color: blue;
    }

    .my-class2 {
      font-weight: bold;
    }

    .my-class3 {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="my-class1 my-class2 my-class3">This div has multiple classes.</div>
</body>
</html>
HTML

In this example, the element will have blue text color, bold font weight, and a yellow background color due to the combined styles from the three classes.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *