HTML Class – Tutorials Art

For the HTML elements(Block/Inline) the html class attribute help to give equal styles. Same class can be shared by multiple html elements. A class attribute is written within html element tag and than can be further used to give the style definition in head section.

HTML Class Syntax:

The HTML Class attribute is written in html element tag. The Class is created in head section within <style> tag.

<style>
.classname
{
   CSS properties;
}
</style>

<!DOCTYPE html>
<html>
<head>
<style>
.food {
  
      text-align: center;
      border: 2px solid black;
      background-color: blue;
}
</style>
</head>
<body>

<div class="food">
  <h2>Ice Cream</h2>
  <p>Mixture of milk cream and delicious flavors.</p>
</div>

</body>
</html>

Note: The Class name is case sensitive.

Different Elements can Share Same Class:

Multiple html elements can use same class.

<!DOCTYPE html>
<html>
<head>
<style>
.food {
  
      text-align: center;
      border: 2px solid black;
      background-color: blue;
}
</style>
</head>
<body>
<div class="food">
  <h2>Icecream</h2>
  <p>Mixture of milk cream and delicious flavors.</p>
</div>

<p  class="food"> I love to eat icecream</p>

<p> I love to eat<span class="food">icecream </span></p>
</body>
</html>

Multiple Classes:

A single html element can have multiple classes.

<!DOCTYPE html>
<html>
<head>
<style>
.food {
  
      text-align: center;
      
      background-color: blue;
}

.sep{
border: 2px solid black;
}

</style>
</head>
<body>

<div class="food sep">
  <h2>Icecream</h2>
  <p>Mixture of milk cream and delicious flavors.</p>
</div>

<p  class="food"> I love to eat icecream</p>

<p> I love to eat<span class="food">icecream </span></p>
</body>
</html>

So Html class attribute make it easier to style both inline and block level html elements as well as it allows to make multiple classes for single element.

Same class can be used by multiple html elements it reduces the repetition of code.