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!
