HTML class Attribute

By | March 2, 2021
HTML class Attribute

The class is a special attribute that can be used with any HTML element. Using the class attribute, we can provide a name to the element and then using that name we style and script that specific element.

Class attribute use

class often used to provide a name to specific elements so styling can be performed on those elements. Even using the JavaScript event handlers, we can access and manipulate those elements that have a class name associated with them.

Vamware

Multiple elements can have a similar class name, and when we style that class, all the other same classes will also get styled.

Class provide an alternative for CSS selection when we want to style two similar elements with different properties.

Example

<!DOCTYPE html>
<html>
<head>

<style>
.first {
color:red;
}

.second {
color:blue;
}
</style>

</head>
<body>

<h3 class ="first"> Welcome to TechGeekBuzz</h3>

<h3 class="second"> Tech Geeks Portal</h3>

</body>
</html>

Output

Welcome to TechGeekBuzz

Tech Geeks Portal

To select the element by its class name, we use the dot (.) symbol followed by the class name.

Class attribute with inline elements

class attribute can also be used with inline elements. In inline elements, we often use the same class name so styling and scripting can be performed on those elements.

Example

<!DOCTYPE html>
<html>
<head>

<style>

.heading{
color:red;
}
</style>

</head>
<body>

<p> 
    <span class ="heading">Techgeekbuzz.com</span> is the platform where you will 
    find the all updated information about programming. At 
    <span class="heading">Techgeekbuzz.com</span> is to deliver you the reliable 
    knowledge of the IT world
</p>

</body>
</html>

Output

Techgeekbuzz.com is the platform where you will
find the all updated information about programming. At
Techgeekbuzz.com is to deliver you the reliable
knowledge of the IT world

How to define a style for a class?

When we want to perform CSS staying on any HTML element, we first need to select it. Generally, we use the tag name to select the element but in case of class we use the (.) period character followed by the name of the class itself.

Example

<!DOCTYPE html>
<html>
<head>

<style>

.first{
color:red;
}

.second{
color:yellow;
}

.third{
color:blue;
}

.forth{
color:green;
}

</style>

</head>
<body>

<p class="first"> First Rank</p>
<p class="second">Second Rank</p>
<p class="third">Third Rank</p>
<p class="forth">Forth Rank</p>

</body>
</html>

Multiple Classes

Similar HTML elements can have different class names. The main objective of class to provide a name to the element so it could be picked separately using the class name itself.

Example

<p class="first"> First Rank</p>
<p class="second">Second Rank</p>
<p class="third">Third Rank</p>
<p class="forth">Forth Rank</p>

Here in this example, we have 4 paragraph elements with different class names. If we want to style each paragraph separately, we can use the corresponding class name to do so.

Elements with the similar class name

We can provide a similar class name to different HTML elements. And when we write the style code for the class name, then it would be applied to all those elements with the same class name.

Example

<!DOCTYPE html>
<html>
<head>

<style>

.country{
color:red;
}


</style>

</head>
<body>

<h4 class="country"> India</h4>
<p class="country"> South Asia country</p>

</body>
</html>

Class with JavaScript

Using the JavaScript, we can access the HTML element by its class name. JavaScript has a built-in method getElementsByClassName() that can grab the element and its content by class name.

Example

<script>
  var x = document.getElementsByClassName("first");
</script>

Summary

  • class are used to provide names to the elements.
  • Multiple elements can share the same class name.
  • CSS and JavaScript can use the class name to access the specific element.
  • The class attribute can be used along with any HTML element.
  • The class name is case sensitive.

Leave a Reply

Your email address will not be published. Required fields are marked *