Classing HTML elements, makes it possible to define CSS styles for classes of elements.
Equal styles for equal classes, or different styles for different classes.
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
Try it Yourself »
Classing Block Elements
The HTML <div> element is a block level element. It can be used as a container for other HTML elements.
Classing <div> elements, makes it possible to define equal styles for equal <div> elements:
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Paris
Paris is the capital and most populous city of France.Situated on the Seine River, it is at the heart of the �le-de-France region, also known as the r�gion parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 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>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 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 »
Classing Inline Elements
The HTML <span> element is an inline element that can be used as a container for text.
Classing <span> elements makes it possible to design equal styles for equal <span> elements.
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
Try it Yourself »