View Categories

HTML – Classes

Table of Contents

In HTML, the class attribute is essential for styling and organizing elements efficiently. It allows you to group multiple elements under the same class, making it easier to apply consistent styles across a webpage. By assigning the same class to multiple elements, you can apply CSS styles or JavaScript functionality to all of them simultaneously, promoting uniformity and simplifying maintenance.

Syntax for Class #

In HTML, you define the class using the class attribute within an element. The CSS styling for that class is applied by using a period . followed by the class name in your CSS file.

Example in HTML:

<element class="highlight">...</element>

Example in CSS:

/* CSS rule for the class */
.highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

Example in JavaScript:

document.getElementsByClassName('highlight');

Using HTML Class Attribute #

The class attribute helps to keep the styling consistent across the webpage, enabling you to reuse the same CSS rules for multiple elements. Below is an example of how to define a class and apply it to different HTML elements.

Example:

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h1 class="header">Coaching Wallah</h1>
   <p class="highlight">Master HTML Classes with ease!</p>
</body>
</html>

In this example, we applied the highlight class to a <p> element, which defines a background color, text color, and padding.

Multiple Classes #

You can apply more than one class to an HTML element by separating the class names with a space. This allows an element to inherit styles from multiple classes.

Example:

<!DOCTYPE html>
<html>
<head>
   <style>
      .heading {
         font-size: 24px;
         color: #333;
         text-align: center;
      }
      .content {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
      }
      .button {
         background-color: #007bff;
         color: #fff;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1 class="heading content">Welcome to Coaching Wallah</h1>
   <p class="content">Learn HTML and more!</p>
   <button class="button">Click Me</button>
</body>
</html>

Here, the <h1> element has two classes: heading and content. The heading class sets the font size and text alignment, while the content class defines the color and line height.

Same Class on Multiple Elements #

Classes can be reused across different elements to ensure consistent styling. In the example below, two <p> elements share the same highlight class, ensuring they both have the same appearance.

Example:

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         color: black;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p class="highlight">HTML classes make styling easier.</p>
   <p class="highlight">They help you reuse styles efficiently.</p>
</body>
</html>

Both paragraphs share the same class, applying the same background color, font weight, and text color to both.

Using the Class Attribute with JavaScript #

Classes can also be used in JavaScript to manipulate elements on the page. By targeting elements with a specific class, you can add interactivity. In the following example, clicking the button toggles the visibility of the paragraph.

Example:

<!DOCTYPE html>
<html>
<head>
   <script>
      function showContent() {
         var element = document.getElementsByClassName('content')[0];
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #007bff;
         color: white;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <button class="interactive-button" onclick="showContent()">Click Me</button>
   <p class="content" style="display: none;">This content is toggled by the button.</p>
</body>
</html>

In this example, when the button is clicked, the paragraph with the content class will toggle between being visible and hidden.

Things to Remember about HTML Classes #

  • More than one class can be assigned to a single HTML element.
  • Both CSS and JavaScript can utilize the class attribute for selecting and styling elements.
  • Class names are case-sensitive, so be sure to use consistent naming.
  • Multiple elements can share the same class to apply consistent styling across your website.
  • In CSS, you select the class using .className, while in JavaScript, you can use the getElementsByClassName() method.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment