HTML - Global class Attribute

The class is a global attribute that is used to specify the class name for the current element or tag. It is generally used with the stylesheet.

Classes allow CSS and JavaScript to select and access specific elements via class selectors or functions like the DOM Method "document.getElementsByClassName".

Syntax

Following is the syntax of the class attribute −

<element class  = "class_Name" >

Example

In the following example, we are creating an HTML document and using the class attributes to style the content of the elements, as follows−

<!DOCTYPE html>
<html>
<head>
   <style>
      .brand {
         font-size: 30px;
         color: green;
      }

      .point {
         font-size: 26px;
         color: black;
      }

      .caption {
         font-size: 20px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <p> This is example of class attribute</p>
   <h2 class="brand">tutorials <span class="point">point</span>
   </h2>
   <p class="caption">Easy to Learn!</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the text applied with a CSS displayed on the webpage.

Example

Following is the another example, where we are going to use the class attribute

<!DOCTYPE html>
<html>
<head>
   <style>
      h1.intro {
         color: blue;
      }

      p.ipsum {
         color: green;
      }
   </style>
</head>
<body>
   <h1 class="intro">Heading1</h1>
   <p>This is a paragraph</p>
   <p class="ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>

On running the above code, the output window will pop up displaying the text applied with CSS on the webpage.

html_attributes_reference.htm
Advertisements