HTML Class

Classes are used to assign some general properties to your element. Let we suppose if our HTML page has more than one classes with the same class name then you can do this, assign value to the elements that can reflect to all class. you can use this with the combination of CSS. CSS tells the browser how to display a HTML-element, this means that all formatting is (or should be) removed from the HTML-document and stored in a separate file – also referred to as the style sheet.

Here the two div with the same class name:

Example.

<!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

    </head>

    <body>

       <div class="test">

          <p>Hi,<br />This is codersArts<br />HTML tutorial</p>

          <p class="content">This is second div</p>

       </div>

       <div class="test">

          <p>In this tutorial you learn Class selectors<br />by naveen kumar<br />date modified</p>

          <p class="content">Thank's for learning</p>

       <div>

      </body>

</html>

Output

Class with CSS

HTML define with the CSS. Their are different type of CSS used in HTML page. Here we will discuss on one internal CSS with example and complete learn in our CSS tutorials.

Example

<!DOCTYPE html>
<html>
<head>
        <title>Page Title</title>
     <style>
        .test{
        background-color: black;
        color: white;
        margin: 20px;
        padding: 20px;
        }
      </style>

</head>
<body>
       <div class="test">
          <p>Hi,<br />This is codersArts<br />HTML tutorial</p>
          <p class="content">This is second div</p>
       </div>       
</body>
</html>

Output:

Conclusion

In this tutorial you learn about HTML class and its uses in HTML pages. Class selector important to find output output as per user choice with the CSS. In next tutorial we learn how to add id selector in our HTML pages.

Powered  by Codersarts