HTML Classes

By assigning the same class to multiple elements, you can easily apply consistent styles or behavior to those elements. For example, if you have several paragraphs that you want to have the same font style, you can assign them all the same class and define the desired font style in your CSS.

Classes are defined using the class attribute in HTML tags. Multiple classes can be applied to an element by separating them with spaces. For example :

Edit Copy Hide

<p class="highlighted">This is a highlighted paragraph.</p>

In this example, the class "highlighted" is applied to the <p> element. Then, in the CSS, you can define the styles for the "highlighted" class to make the text stand out.

• Step 1 : Navigate to the Live HTML Editor provided by the platform to test the code
• Step 2 : Create HTML elements with classes. Let's create a few paragraphs and assign them the "highlight" class.
• Step 3 : Define a CSS style. Create a style that will change the background color of elements with a specific class.

Edit Copy Hide

<p class="highlight1">This is a highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
<p class="highlight2">This is another highlighted paragraph.</p>

Edit Copy Hide

    .highlight1 {
        background-color: yellow;
    }
      .highlight2 {
        background-color: green;
    }

In this example, we have three <p> elements. The first and third paragraphs have the class "highlight1 " , "highlight2" applied to them and we're defining a style for the class "highlight1" that will give the elements a yellow background color and "highlight2" that will give the elements a green background color.

• Step 4 : Learning how to Apply different styles to classes. You can create multiple CSS styles for different classes and apply them to various elements. Let's add another CSS style that changes the text color of elements with the "highlight" class.
• Step 5 : Assign multiple classes to an element HTML allows you to assign multiple classes to an element. Let's modify one of the paragraphs to have both the "highlight" and "special" classes.

Edit Copy Hide

<p class="highlight special">This is a highlighted and special paragraph.</p>

Edit Copy Hide

    .highlight {
        background-color: yellow;
        color: red;
    }

    .special {
        font-weight: bold;
        text-decoration: underline;
    }

In this updated example, we've added a new style for the "special" class that will make the text bold and underlined.

By assigning both classes, we can combine the styles defined for each class.

That's it! You've gone through a step-by-step tutorial on using classes in HTML. Remember that classes provide a way to group elements and apply consistent styles or behavior. By defining CSS styles for classes, you can easily customize and manipulate elements on your webpage.