Using the class attribute

Using the class attribute : Applying a CSS class to an HTML element in the tag of the < body > of our code is really simple.

We just add the name we have chosen for our CSS class to the opening HTML tag for the element we want to change. Rather than using the style attribute, we now use the new class attribute.

The class attribute is written and works in exactly the same way as all the other attributes we’ve used so far in this mission. Let’s see what we have to do to apply our CSS class to HTML elements on our page:

<!DOCTYPE html>
<html>
<head>
 <title>Hello World.</title>
 <style>
 .text {
 text-align: center;
 font-size: 18pt;
 background-color: aqua;
 }
 </style>
</head>
<body>
 <p class="text">Using the CSS class attribute is easy.</p>
 <p>with the < p > tag one can use the class attribute.</p>
 <p class="text">This discovery is of great significance to learning CSS and HTML.</p>
 <p>Experiment on your own.</p>
 <p class="text">Go ahead play with the code.</p>
</body>
</html>

Sample output of above code: Using the class attribute

Using the CSS class attribute is easy.

with the < p > tag one can use the class attribute.

This discovery is of great significance to learning CSS and HTML.

Experiment on your own.

Go ahead play with the code.

 

In the class attribute, we have used our name for the CSS class as the value. We haven’t included the dot ( . ) at the start.

As with all the other attributes, we have used an equals sign (=) and double quotes (” “) to set its value.

Look at how using a CSS class and the class attribute has easily changed the layout of our page!

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.