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