HTML Classes

HTML  Classes: HTML class attribute is used to specify a single (or) multiple class names for HTML element. And the class name can be used by CSS and JavaScript to do some tasks in HTML.

HTML Classes

A class attribute can be defined with <style> tag or by using a separate file (.) character. In HTML we can use the same class for selecting elements.

Example 1:



<!DOCTYPE html>  
<html>  
<head>  
  <style>  
     .headings{   
      color: lightgreen;  
      font-family: cursive;  
      background-color: black; }  
    </style>  
</head>  
<body>  
<h1 class="headings">This is first heading</h1>  
<h2 class="headings">This is Second heading</h2>  
<h3 class="headings">This is third heading</h3>  
<h4 class="headings">This is fourth heading</h4>  
</body>  
</html>

Example 2:

<style>    
.fruit {    
    background-color: orange;    
    color: white;    
    padding: 10px;    
}     
</style>      
<h2 class="fruit">Mango</h2>    
<p>Mango is king of all fruits.</p>    
<h2 class="fruit">Orange</h2>    
<p>Oranges are full of Vitamin C.</p>        
<h2 class="fruit">Apple</h2>    
<p>An apple a day, keeps the Doctor away.</p>

HTML Multiple Classes

We can use multiple class names with HTML elements. These class names must be separated by a space.

Example:

<!DOCTYPE html>    
<html>    
<style>    
.fruit {    
    background-color: orange;    
    color: white;    
    padding: 10px;    
}     
    
.center {    
    text-align: center;    
}    
</style>    
<body>        
<h2>Multiple Classes</h2>    
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>    
   
<h2 class="fruit center">Mango</h2>    
<h2 class="fruit">Orange</h2>    
<h2 class="fruit">Apple</h2>       
</body>    
</html>