Using The class Attribute
The HTML class attribute allows us to give equal styles for elements with the same class name.
Here we have got three <div> elements which are pointing to the same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is known to be the capital of England. It is found to be the most
populous city in the whole of United Kingdom, which is having a metropolitan area of more than 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html>
Try it Yourself
London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Found on the banks of River Thames, London is a major settlement for more than two millennia, with its history speaking of its founding by the Romans, who had named the city as Londinium.
Paris is a very popular city, which is known as the capital of France.It is also the most populous city of France.
Situated on the banks of River Seine, it is found at the central place of the Île-de-France region, also known as the région parisienne.
on considering its metropolitan area, it is one of the largest populous city in Europe, having over 12 million inhabitants.
Tokyo is known as the capital of Japan, found at the center of the Greater Tokyo Area, and also known as the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and considered to be the home of the Imperial Family of japan.
The Tokyo prefecture is also known to be one of the world's most populous metropolitan area having 38 million people and also the the largest urban economy in the world.
Using The class Attribute for Inline Elements
The HTML class attribute is also used for inline elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html>
Try it Yourself