HTML - Classes

In HTML, the class attribute is a global attribute used to assign one or more classification names to HTML elements. Classes make it possible to define a uniform style rule in CSS once and apply it to multiple elements throughout a webpage. In addition, classes serve as critical hooks for JavaScript to manipulate the Document Object Model (DOM).

In CSS, a class selector is prefixed with a period (dot) . followed by the class name (e.g., .state { color: white; }).

1. Foundational Example: Styling Multiple State Profiles

In this example, the CSS class .state is created once and reused across multiple paragraphs (such as descriptions for Gujarat and Maharashtra) to provide uniform visual styling:

<!DOCTYPE html>
<html>
<head>
  <title>HTML - Class Example</title>
  <style>
    /* The dot prefix defines a CSS class selector */
    .state {
      background-color: #5b2c6f;
      color: #ffffff;
      margin: 15px 0;
      padding: 16px;
      border-radius: 6px;
      line-height: 1.6;
    }
  </style>
</head>
<body>

  <h1>States of India</h1>
  <hr>

  <h2>Gujarat</h2>
  <p class="state">Gujarat is a state on the western coast of India, known for its rich cultural heritage, dynamic business environment, and 1,600 km coastline along the Arabian Sea. Its capital is Gandhinagar and its commercial hub is Ahmedabad.</p>

  <h2>Maharashtra</h2>
  <p class="state">Maharashtra is India's second-most populous state and the financial powerhouse of the nation. It is home to Mumbai, India's financial capital, as well as historic educational centers like Pune and Nagpur.</p>

</body>
</html>

Live Webpage Output

States of India

Gujarat

Gujarat is a state on the western coast of India, known for its rich cultural heritage, dynamic business environment, and 1,600 km coastline along the Arabian Sea. Its capital is Gandhinagar and its commercial hub is Ahmedabad.

Maharashtra

Maharashtra is India's second-most populous state and the financial powerhouse of the nation. It is home to Mumbai, India's financial capital, as well as historic educational centers like Pune and Nagpur.

2. Assigning Multiple Classes to a Single Element

An HTML element is not limited to a single class. You can apply multiple classes by separating their names with spaces inside the class attribute. This technique is the architectural foundation of CSS frameworks like Bootstrap and Tailwind CSS:

<!-- Multiple utility classes applied together -->
<p class="state highlight text-large">
  Important state notification with compound styling.
</p>

/* CSS definitions */
.state { background-color: #5b2c6f; color: white; padding: 15px; }
.highlight { border: 3px solid #f39c12; }
.text-large { font-size: 18px; font-weight: bold; }

3. Class vs. ID: Key Differences

A frequent question in university viva exams is the technical difference between the class attribute and the id attribute:

Feature	Class (`class="..."`)	ID (`id="..."`)
Uniqueness	Can be reused across many elements on the same page.	Must be strictly unique to one element per HTML document.
CSS Selector	Prefixed with a dot: `.classname`	Prefixed with a hash: `#idname`
Multiple Values	Yes (e.g. `class="btn btn-primary"`)	No (an element can have only one single ID value).
CSS Specificity Weight	Medium (0, 0, 1, 0)	High (0, 1, 0, 0) — harder to override cleanly.
JavaScript Selection	`document.getElementsByClassName()` or `document.querySelectorAll()`	`document.getElementById()` (returns single direct node).
Anchor Jumping	Cannot be targeted as a URL fragment hash.	Targets internal page jump links (e.g. `<a href="#about">`).

4. Manipulating Classes with JavaScript

Modern interactive websites dynamically add, remove, and toggle classes in response to user actions (like opening mobile navigation menus, dark mode toggles, or input error states):

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
  function toggleDarkMode() {
    // Toggles the 'dark-theme' class on the body element
    document.body.classList.toggle("dark-theme");
  }
</script>

5. Hands-on Practice Session: Modular Alert System

Assignment Scenario: Build a reusable alert box system using a base class (.alert) combined with modifier classes (.alert-success, .alert-warning, .alert-danger) demonstrating the power of multiple classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modular CSS Classes Practice</title>
  <style>
    /* Base alert class defining geometry and typography */
    .alert {
      padding: 14px 20px;
      margin-bottom: 16px;
      border-radius: 4px;
      font-family: Arial, sans-serif;
      font-size: 15px;
      border-left: 5px solid transparent;
    }
    /* Modifier class for Success */
    .alert-success {
      background-color: #d4edda;
      color: #155724;
      border-left-color: #28a745;
    }
    /* Modifier class for Warning */
    .alert-warning {
      background-color: #fff3cd;
      color: #856404;
      border-left-color: #ffc107;
    }
    /* Modifier class for Danger */
    .alert-danger {
      background-color: #f8d7da;
      color: #721c24;
      border-left-color: #dc3545;
    }
  </style>
</head>
<body style="max-width: 600px; margin: 30px auto;">

  <h2>System Notifications (Multiple Classes)</h2>
  
  <div class="alert alert-success">
    <strong>Success!</strong> Your BCA assignment has been submitted successfully.
  </div>

  <div class="alert alert-warning">
    <strong>Warning:</strong> Examination registration closes at midnight.
  </div>

  <div class="alert alert-danger">
    <strong>Error!</strong> Invalid password. Please try again.
  </div>

</body>
</html>

6. BCA University Exam Viva Questions

Q1. What is the fundamental difference between 'class' and 'id' in HTML?

A class attribute is reusable across multiple elements on the same page, allowing shared styling and batch scripting. An id attribute must be strictly unique to a single element per HTML document, primarily used for bookmark anchors, specific JavaScript DOM selection, and form label bindings.

Q2. How do you apply multiple classes to a single HTML element?

List the class names inside the class attribute separated by spaces, for example: <div class="card shadow-lg p-3 text-center">. Commas, semicolons, or dots must NOT be used to separate class names.

Q3. Why is it recommended to use classes instead of IDs for CSS styling?

IDs have very high CSS specificity (0, 1, 0, 0), making them difficult to override later without resorted to messy !important rules. Classes have balanced specificity (0, 0, 1, 0) and encourage modular, reusable design patterns.

Q4. What naming rules must be followed when choosing class names?

Class names can contain letters (a-z, A-Z), digits (0-9), hyphens (-), and underscores (_). They must not start with a digit, two hyphens, or a hyphen followed by a digit. Class names are case-sensitive in CSS stylesheets.

Q5. What JavaScript property allows easy addition and removal of classes?

The modern DOM classList API provides intuitive helper methods: element.classList.add("classname"), element.classList.remove("classname"), element.classList.toggle("classname"), and element.classList.contains("classname").

7. Frequently Asked Questions (FAQ)

1. Can different HTML elements (like <h1>, <p>, and <div>) share the same class name?

Yes, absolutely! The exact purpose of a class is to group any elements that need identical styling or behavior, regardless of tag type.

2. What is the difference between writing .state and p.state in CSS?

.state matches any HTML element that has class="state". In contrast, p.state is a more specific compound selector that applies only to <p> paragraphs that carry class="state", ignoring any headings or divs with that class.

3. Are class names case-sensitive in HTML and CSS?

While HTML elements and attributes themselves are case-insensitive, class names are case-sensitive in CSS. For example, .State and .state are recognized as two completely distinct classes.

4. How does the BEM naming methodology organize CSS classes?

BEM stands for Block, Element, Modifier. It structures class names systematically: .card (Block), .card__title (Element inside block), and .card--featured (Modifier indicating variation). This prevents class name collisions in large-scale applications.