How do we use different CSS classes in HTML?

HTML Web Development Front End Technology

In HTML, define styles rules based on the class attribute of the 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, .black

.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;
}

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

Example

Live Demo

<!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>

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

Example

Live Demo

<!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>

Ali

Published on 01-Feb-2018 08:57:53

Previous Page Print Page