The HTML class attribute is neither an element or a tag. The HTML class attribute as represented by the (.) character must come before a class name in order for you to individually style a particular element or tag class.
One very fascinating thing about the HTML class attribute is that it allows you to style multiple tags once and for all without taking so much time to style them individually.
HOW TO USE THE HTML CLASS SYNTAX
To effectively the class attribute in HTML, follow this syntax:
<style>
.classname { property:value;}
</style>
The class attribute is used in HTML, CSS, and JavaScript. But in this article we’ll only focus on how to use the class attribute in HTML using internal CSS and a show of what it’s little in JavaScript.
USING THE CLASS ATTRIBUTE IN HTML TAGS
As earlier established, we can use the class attribute in HTML using either internal CSS or inline CSS. For best practices and clarity sake, we’ll use the internal CSS in our HTML.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS ATTRIBUTE </title>
</head>
<style>
.paragraph {
background-color: pink;
color: #000;
font-size: 20px;
text-decoration: underline;
}
</style>
<body>
<h1>STYLING TAGS IN HTML</h1>
<p class="paragraph">This is some text that has been styled using the class attribute.</p>
<p>This is some more text.</p>
<p>And some more</p>
</body>
</html>
To explain the above written code, you’ll see that the first paragraph line has been given a class attribute name, “paragraph”. This is because there are two <p> tags already in the document and if we decide we want to style the first <p> tag without giving it a class attribute name, both <p> tags will end up being styled together. So, in order to tell the web browser the <p> tag we want to style and draw attention to, we must use the class attribute.
STYLING MULTIPLE TAGS USING THE CLASS ATTRIBUTE
You may ask, “what if I want to style a heading and a paragraph tag the same way, how do I do that?”
To style a heading and a paragraph tag using the same CSS properties, use the same class attribute name for both tags.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS ATTRIBUTE </title>
</head>
<style>
.paragraph {
background-color: pink;
color: #000;
font-size: 20px;
text-decoration: underline;
}
</style>
<body>
<h1 class="paragraph">STYLING TAGS IN HTML</h1>
<p class="paragraph">This is some text that has been styled using the class attribute.</p>
<p>This is some more text.</p>
<p>And some more</p>
</body>
</html>
In this way, you can style multiple tags and element using the same CSS properties (if that’s what you want).
USING DIV AND SPAN WITH THE HTML CLASS FOR STYLING
The div is a container for housing related tags and elements grouped together for a particular section in a document page.
Supposing we want to create a section in a document web page that has to be styled using the same CSS properties, we’ll use the div element and give the class attribute a name.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS ATTRIBUTE </title>
</head>
<style>
.Section {
background-color: #125432;;
padding: 20px;
margin: auto;
color: #fff;
border: 2px solid black;
}
</style>
<body>
<div class="Section">
<h2>How To Code Better</h2>
<ol>
<li>Read documentations</li>
<li>Read other people's code</li>
<li>Write your own code to build your coding muscles</li>
</ol>
</div>
</body>
</html>
Next, we’ll talk about how to use the span tag with the class attribute.
The span tag is used to select a particular word in a sentence for styling. In the example below, we’ll give the span tag in the sentence a class attribute with the value, “important.”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS ATTRIBUTE </title>
</head>
<style>
.read{
text-decoration: underline;
color: red;
font-size: 20px;
}
</style>
<body>
<p><b> For this example, I want to underline and style the word, "read" in the next sentence paragraph.</b></p>
<p>To write correct codes, <span class="read">read</span> documentations.</p>
</body>
</html>
USING THE CLASS ATTRIBUTE IN JAVASCRIPT
The JavaScript programming language allows you do many magical things. When you use specific class names with JavaScript, it tells JavaScript to perform the required instruction to class attribute with the given value you’ve chosen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS ATTRIBUTE</title>
</head>
<body>
<h2> Using Class Attribute with JavaScript</h2>
<p>Touch the button to hide the elements with the class name "read", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="read">Read</h2>
<p>Read good documentation.</p>
<h2 class="read">Read some more</h2>
<p>Read through other people's code.</p>
<h2 class="read">Code</h2>
<p>Write your own code to strengthen your coding muscles.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("read");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
