Hyper Text Markup language, also known as HTML, is the base for creating a website. HTML is one of the markup languages we use to create the basic structure of our website. We can make a decent website with CSS(Cascading Style Sheets) and Javascript. For web development, you must clear your basics of HTML.
In this blog, we will learn about one of the essential properties in HTML that allows us to implement styling and scripting in our HTML tags. We will discuss the classes in HTML.
Need of Classes
A class in HTML is an attribute that you, as a developer, must know because you will use the class keyword frequently during the styling and scripting of your webpage. We will learn how to use class to add functionality to particular tags in HTML. We will also implement some styling with the help of classes.
Before we discuss the implementation, you must clearly understand why we need HTML classes. A class in HTML is one of the selectors we use to perform styling or add scripting on a particular HTML tag. Other different types of selectors are mentioned below.
Tag selector - You can use an HTML tag name to add styling to that particular tag.
Id selector - It is also an attribute we can use to add styling and scripting in an HTML tag, but the ids must be unique for each tag.
Universal selector( * ) - The asterisk ( * ) symbols work as a universal selector in web development.
To learn more about CSS Selectors, check out the link.
Even though we have multiple selectors options, what makes the class selector unique? Every selector has individuality, and as you progress in the learning process, you will automatically know where to use which selector. But you will use the class selector most whenever you build a website using HTML, CSS, and Javascript.
The reason is because of the properties possessed by the classes in HTML. We will discuss these properties individually in the blog, but first, learn how to use classes in HTML.
Class Attribute
As mentioned, class is an attribute we use in HTML to add styling and scripting. Most HTML tag has their attributes; for example, <input></input> tag has a “type” attribute, which allows us to declare the input type. The class attribute is a global attribute, and we can include any HTML tag we need.
You must add the class = “class_name” in the HTML tag.
Example
<h1 class=”Coding Ninjas Studio”>Welcome to Coding Ninjas</h1>
In the above example, “Coding Ninjas Studio” is the name of the class, and we will use this name everywhere in the files to implement the styling and scripting. With the help of class attributes, we can effectively perform the desired action on the above <h1> tag. Let's implement an example to understand the working of the classes in HTML.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Studio</title>
<style>
.bgcolor{
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1>Welcome to Coding Ninjas</h1>
<p class="bgcolor">This is some random text with black background</p>
</body>
</html>
Output
We have added a class attribute in <p> tag named “bgcolor”. In the <style> tag, we are implementing some styling to the <p> tag. We are changing the font and background color of the text in <p> tag.
You must remember to add a dot( . ) before the class name to implement the styling to tag where we have included the class.
You can see that we have added a dot( . ) before bgcolor to implement styling. Classes in HTML are case-sensitive, so make sure you use the correct name and always use { } brackets with the class name to use the CSS properties.
Properties of Class Attribute
Now, let's discuss the properties of the class attribute which make it unique from the rest of the selectors in HTML.
Sharing the Same Class
Suppose there are multiple panels in your website, and some need to have the same type of styling, like margin, padding, font color, etc.; there are better approaches than writing different class names for each panel.
We can create one common class in HTML classes and use that class in any HTML tag we want as a class attribute.
Example
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Studio</title>
<style>
.commonclass{
display:flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Welcome to Coding Ninjas</h1>
<p class="commonclass">This is a paragraph tag.</p>
<span class="commonclass">This is a span tag.</span>
</body>
</html>
Output
We have used a class named .commonclass, which centralizes the data. As you can see in the code, we can share the same class in two different tags <p> and <span> to make them appear in the center of the screen.
More than One Class
Another property of classes in HTML is that you can use multiple classes for a single HTML tag. As we have discussed, you can share a class in HTML, but if you want more features to add to your tag besides the shared classes, you can add multiple classes.
Example
Let's take the example of the above code. Let's say we want to add different text colors to the paragraph tag.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Studio</title>
<style>
.commonclass{
display:flex;
justify-content: center;
}
.textcolor{
color: blueviolet;
}
</style>
</head>
<body>
<h1>Welcome to Coding Ninjas</h1>
<p class="commonclass textcolor">This is a paragraph tag.</p>
<span class="commonclass">This is a span tag.</span>
</body>
</html>
Output
As you can see in the <p> tag class attribute, we have added a class named .textcolor which changes the color of the text in <p> tag, and it not affecting the other tags in HTML.
Classes with Javascript
We have discussed how to use classes to implement styling; now, let's learn how to add scripting with the help of classes. We can manipulate the HTML DOM with the help of properties available in Javascript. We will use some of the DOM manipulation properties and display the changes on the browser.
To access the classes in Javascript, we need to use the document.getElementsByClassName( ) in the script tags or in a separate javascript file.
We must pass the class name in the parameter. Then after that, we can access the properties to manipulate the DOM. In the example below, we must use the ‘.value’ and ‘.innerText’ properties. The .value is used when we need to access the input value from the user, and .innerText is used to manipulate the text of the HTML tag.
After typing the name and clicking on the enter button.
In the above code, we must enter the name and press enter. We will see a message with the entered user name on the screen.
Below is the script tag; we have created a function called displayfun() in which we store the value of the user input and then manipulate the inner text of the <p> tag with the .innerText property.
<script>
function displayfun(){
var uservalue = document.getElementsByClassName('inputvalue')[0].value
document.getElementsByClassName('displayvalue')[0].innerText = 'Hello '+ uservalue +' ,Welcome to Coding Ninjas Studio.'
}
</script>
Frequently Asked Questions
Is HTML a programming language?
No, HTML is not a programming language. It is a markup language that we use to build the foundation of websites.
Why do we use classes in HTML?
We use classes in HTML to implement styling and scripting to the HTML tags in the HTML document.
Can we share the HTML classes?
We can use a single HTML class with different HTML tags if required.
Is class in HTML case sensitive?
Yes, class in HTML is case-sensitive. You need to make sure you type the correct name of the class.
Can we use more than one class in HTML tags?
Yes, we can effectively use more than one class in class attribute in HTML.
Conclusion
In this blog, we have discussed the classes in HTML. We learned the need for classes in HTML, and we also discussed various properties of HTML classes.
To learn more about HTML, check out the following articles.
117+ registered 