HTML Classes

HTML classes are used to group elements for styling and scripting purposes. By assigning a class attribute to HTML elements, you can apply specific styles and behaviors to those elements using CSS and JavaScript.

Syntax

To add a class to an HTML element, use the class attribute:


<tag class="class-name">Content</tag>

Benefits of Using Classes

Reusability: Apply the same styles to multiple elements by using the same class name.

Maintainability: Easily update styles in one place by modifying the CSS for a class.

Organization: Helps to keep the HTML structure organized and readable.

JavaScript Targeting: Classes can be used to select and manipulate elements with JavaScript.

Example

Here’s an example demonstrating how to use classes in HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Classes Example</title>
    <style>
        .header {
            background-color: blue;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .content {
            padding: 20px;
            background-color: lightgrey;
        }
        .footer {
            background-color: blue;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Header Section</h1>
    </div>
    <div class="content">
        <p>This is the main content area.</p>
    </div>
    <div class="footer">
        <p>Footer Section</p>
    </div>
</body>
</html>

Explanation of the Example

  1. HTML Structure: The HTML document includes three main sections: header, content, and footer.
  2. Class Assignment: Each section is assigned a class (header, content, footer) using the class attribute.
  3. CSS Styling: In the <style> block, each class is styled:
    • .header: Blue background, white text, padding, and center-aligned text.
    • .content: Light grey background and padding.
    • .footer: Similar styling to the header.

Multiple Classes

An element can have multiple classes, separated by spaces:


<div class="class1 class2">Content</div>

This allows for combining different styles and behaviors for a single element.

Example with Multiple Classes


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Classes Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="highlight italic">This paragraph is highlighted and italicized.</p>
</body>
</html>

In this example, the paragraph is both highlighted and italicized by combining the highlight and italic classes.

HTML Classes – Interview Questions

Q 1: What is a class in HTML?

Ans: A class is used to group multiple elements.

Q 2: Can multiple elements share the same class?

Ans: Yes.

Q 3: How do you apply CSS to a class?

Ans: Using .classname.

Q 4: Can an element have multiple classes?

Ans: Yes.

Q 5: Is class name case-sensitive?

Ans: Yes.

HTML Classes – Objective Questions (MCQs)

Q1. What is the purpose of the class attribute in HTML?





Q2. Can multiple elements share the same class name?





Q3. How do you assign a class to an element?





Q4. Can an element have multiple classes?





Q5. Which CSS selector targets a class?





Related HTML Classes Topics