HTML - CSS Classes

In HTML, a class is an attribute that can be applied to one or more elements and is used to style and categorize elements based on common characteristics or purpose. Classes allows multiple elements to share the same styling rules. By assigning the same class to multiple elements, you can apply CSS styles or JavaScript functionality to all of them simultaneously. This promotes consistency in design and layout, making it easier to manage and update a website.

Classes are defined in the HTML code using the "class" attribute, and their styling is determined in a linked CSS file. This separation of content and style is a key principle in web design, facilitating the creation of visually appealing and organized web pages.

Using HTML Classes for Styling Elements

HTML classes are essential for styling and formatting web page elements consistently. They allow you to apply the same styles to multiple elements without repeating code, promoting maintainability and a cohesive design. Here's how to use classes effectively with a practical example −

Defining a Class

To create a class, you need to define it within your HTML document or link to an external CSS file that contains class definitions. Classes are defined using the "class" attribute.

Example

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
   <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

Using external CSS to define the class

Creating a CSS Rule

In an external CSS file (styles.css in this case), you define the styling rules for the class −

Example

/* styles.css */
.highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

In this example, we've created a class named "highlight" that changes the background color, text color, and font weight of the elements it's applied to.

Applying the Class

To apply the class to an HTML element, you simply add the class name within the element's "class" attribute.

Example

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
   <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

We have included the "highlight" class in the parameter element. Now, this paragraph will inherit the specified styles from the CSS rule defined in the external stylesheet

Using internal CSS in HTML file

Below is the example where we can include the <style> tag to define the styling rules for the class in our HTML code without creating a dedicated CSS file −

Example

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

We have applied class heading to h1 element, class content top element and class button to button element using internal CSS.

Using Classes for Multiple Elements

The most important feature of classes is their reusability. You can apply the same class to multiple elements to maintain a consistent look throughout your website.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         color: black;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p class="highlight">This is a highlighted paragraph.</p>
   <p class="highlight">So is this one.</p>
</body>
</html>

Both of these paragraphs will have the same highlighting because they share the "highlight" class.

Overriding Styles

Sometimes, you may want to make specific adjustments to a class for a particular element. You can do this by adding inline styles or by using a more specific CSS selector.

Example

In the following example we have added the style class directly in the HTML file −

<!DOCTYPE html>
<html>
<head>
   <style>
      .highlight {
         background-color: yellow;
         color: black;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p class="highlight" style="background-color: red;">This paragraph has a different background color.</p>
</body>
</html>

Example

In this example we are creating a .css file containing the style. We will later include that class in the HTML element −

<style>
   .highlight {
      background-color: yellow;
      color: black;
      font-weight: bold;
   }
   .highlight.special {
      background-color: blue;
   }
</style>

Following are the contents of the HTML file −

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

In this case, the "special" class overrides the "highlight" class, giving the paragraph a blue background.

Multiple classes

We can apply multiple classes to a single element by separating class names with a space. Let’s look at one example to have a clear understanding of how it works −

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 My Website</h1>
   <p class="content">This is a sample paragraph.</p>
   <button class="button">Click Me</button>
</body>
</html>

In the above example, the <h1> element has two classes applied: "heading" and "content." This is achieved using a space to separate the class names within the class attribute.

Multiple classes can be applied to the same element to inherit styling from both classes. In this case, "heading" class provides a large font size and center alignment, while the "content" class provides a specific text color and line-height.

Use cases for HTML Classes

HTML classes are versatile and serve various purposes beyond styling. Here are some simple use cases of HTML Classes −

JavaScript Interaction

Classes are frequently used to identify elements for JavaScript functions. For example, you can use a class to target specific elements, like buttons, and make them interactive (e.g., toggling content or triggering actions) through JavaScript.

Example

<!DOCTYPE html>
<html>
<head>
   <script>
      function toggleContent() {
         var element = document.getElementById('toggle');
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #7CAA51;
         padding: 20px 32px;
         border: none;
         color: black;
         text-align: center;
         display: inline-block;
         font-size: 18px;
         margin: 10px 20px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <button class="interactive-button" onclick="toggleContent()">Toggle Content</button>
   <p id="toggle" style="display: none;">This content can be toggled by clicking the button.</p>
</body>
</html>

Grouping Elements

Classes are handy for grouping related elements. For instance, you can use a class to group all the elements of a particular section on your webpage, making it easier to apply styling or perform actions on them collectively.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .section {
         border: 1px solid #ddd;
         padding: 10px;
         margin: 10px;
      }
   </style>
</head>
<body>
   <div class="section">
      <h2>Section 1</h2>
      <p>This is the content of section 1.</p>
   </div>
   <div class="section">
      <h2>Section 2</h2>
      <p>This is the content of section 2.</p>
   </div>
</body>
</html>

Form Styling

Classes are valuable for styling form elements like input fields, checkboxes, and radio buttons. You can use classes to create consistent and visually appealing form designs.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .input-field {
         padding: 16px;
         margin: 11px;
         border-radius: 22px;
         border: 4px solid #cce;
      }
   </style>
</head>
<body>
   <input type="text" class="input-field" placeholder="First Name">
   <br>
   <input type="email" class="input-field" placeholder="Last Name">
</body>
</html>
Advertisements