HTML Classes

• HTML classes are attributes that can be added to HTML elements to group and identify them as belonging to a specific category or style. Classes are used to apply CSS styles or JavaScript functionalities to multiple elements that share the same class name. The class attribute is used to assign a class to an HTML element.

 

Here's how you use classes in HTML:

Assigning a Class to an Element:

• To add a class to an HTML element, use the class attribute. The value of the class attribute should be a space-separated list of class names. For example:

<p class="intro">This paragraph has the class 'intro'.</p>
<p class="intro important">This paragraph has both 'intro' and 'important' classes.</p>

In the example above, the first <p> element has the class "intro," and the second <p> element has both the "intro" and "important" classes.

 

Styling Elements with CSS:

• Once you've assigned classes to elements, you can use CSS to style those elements based on their classes. For example:

.intro {
  font-size: 18px;
  color: #333;
}

.important {
  font-weight: bold;
  color: red;
}

The CSS above will style elements with the class "intro" with a font size of 18px and black color, and elements with the class "important" will have a bold font weight and red color.

 

Applying Classes to Different Elements:

You can apply the same class to different types of elements. For example:

<h1 class="intro">This is a heading with the class 'intro'.</h1>
<p class="intro">This is a paragraph with the class 'intro'.</p>

Here, both the <h1> and <p> elements have the "intro" class, so they will receive the styles defined for the "intro" class in the CSS.

 

Using classes allows you to create consistent styles across different elements, making it easier to manage and maintain the design of your web page. Additionally, classes are an essential concept when working with frameworks like Bootstrap or when implementing JavaScript functions that target specific groups of elements based on their class names.

Thank You.