How do we use different CSS classes in HTML?

HTML Web Development Front End Technology

We specify a class for an HTML element using the class attribute.

Multiple HTML elements can share the same class. And using various attributes of the class, like changing colors, fonts, etc., we can define styles rules for these HTML elements. The elements having that class will be formatted according to the defined rule. This is known as class selector.

For selecting elements with a specific class, you need to write a period (.) character, followed by the name of the class, for example, let us look at the “.black” class,

.black {
   color: #000000;
}

Render the content in black for every element with class attribute set to black in our document. For example, render the content in black for only <h3> elements with class attribute set to black.

h3.black {
   color: #000000;
}

We use class attribute to point to a class name in a style sheet. It can also be used by a JavaScript to access the elements with the specific class name.

Example 1

Given below is an example, where we have two <div> elements with a class attribute with same value. All the <div> elements will be styled equally according to the style definition in the head tag.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .information,ol {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      ol{
         background-color: darkgoldenrod;
      }
   </style>
</head>
<body>
   <div class="information">
      <h2>Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2>Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
</body>
</html>

Following is the output for the above example program.

Example 2

Given below is an example, where we have two <div> elements with a class attribute with different value. Two <div> elements will be styled according to the style definition in the head tag.

To define multiple classes, separate the class names with a space. The element will be styled according to the classes specified.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .room {
         font-family: monospace;
         font-size: 200%;
         color: tomato;
         text-align: center;
      }
      .two{
         font-family: cursive;
         color: lawngreen;
         text-align: center;
      }
   </style>
</head>
<body>
   <p class="room">Meta tag contents are not visible on your browser.</p>
   <p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>

To define multiple classes, separate the class names with a space or mention a different value. The element will be styled according to the classes specified.

Example 3

Given below is an example, where we have three <div> elements with a class attribute with different value. Two <div> elements will be styled equally according to the style definition in the head tag and the other will be styled according to the style definition in the head tag.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .information,ol {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      .computerscience,ul {
         border: 2px solid black;
         margin: 20px;
         padding: 20px;
      }
      ol{
         background-color: brown;
      }
      ul{
         background-color: tomato;
      }
   </style>
</head>
<body>
   <div class="information">
      <h2>Jason</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -A</li>
      </ol>
   </div>
   <div class="information">
      <h2>Abdul</h2>
      <ol>
         <li>Bachelor's of Engineering</li>
         <li>IT stream</li>
         <li>section -B</li>
      </ol>
   </div>
   <div class="computerscience">
      <h2>Satya</h2>
      <ul>
         <li>Bachelor's of Engineering</li>
         <li>Cse stream</li>
         <li>section -A</li>
      </ul>
   </div>
</body>
</html>

Following is the output for the above example program.

Example 4

Another example can include styling the <p> tag. Through the following, style all <p> elements with class="device"


<!DOCTYPE html>
<html>
<head>
   <style>
      p.device {
         background: #000000;
         color: #fffffF;
      }
   </style>
</head>
<body>
   <p>This is demo text</p>
   <p class="device">Information about devices.</p>
   <p>This is demo text</p>
</body>
</html>

Example 5

The styling of the <p> tag can be done with multiple classes i.e. devices and accessories here −


<!DOCTYPE html>
<html>
<head>
   <style>
      p.device {
         background: #000000;
         color: #fffffF;
      }
      p.accessories {
         text-align: center;
      }
   </style>
</head>
<body>
   <p class="device accessories">DEVICE DETAILS</p>
   <p class="device">Information about devices.</p>
</body>
</html>