The class Attribute in HTML

0
146
views

Introducing The class Attribute

The class attribute used to give one or more class name to a HTML element

This class name can be used by CSS and JavaScript to define some certain property to elements with the specified class name.

EXAMPLE

<html>
<head>
    
    <style>
     body {color:black; background-color:white;}
     .red {color:red;}
     
    </style>
</head>

<body>
    <p class="red">
        this text should be red
    </p>
</body>

</html>

 

Multiple Classes

You can assign multiple classes to a single element

EXAMPLE

<html>
<head>
<style>
     body {color:black; background-color:white;}
     .red {color:red;}
     .green {color:green}
     .background {background-color:blue;}
    </style>
</head>

<body>
    <h2 class="red">London in red</h2>
<h2 class="green"> green Paris</h2>
<h2 class="background">Tokyo with background</h2>
</body>
</html>

Same Class on different HTML Tag

One can use the same class on various html elements

EXAMPLE

<html>
<head>
     <title>untitled</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
     <meta name="generator" content="Geany 1.31" />
    
    <style>
     body {color:black; background-color:white;}
     .red {color:red;}
     .green {color:green}
     .background {background-color:blue;}
    </style>
</head>

<body>
    <h2 class="red">London in red</h2>
<h2 class="green"> green Paris</h2>
<h2 class="background">Tokyo with background</h2>

<p class="background">This para includes a background This para includes a background This para includes a background This para includes a background
This para includes a backgroundThis para includes a backgroundThis para includes a background
This para includes a backgroundThis para includes a backgroundThis para includes a background
This para includes a backgroundThis para includes a background</p>
</body>
</html>