Classes HTML
Categorize HTML (set class) so that we can define CSS styles for the class of the element.
Set the same style for the same class, or set different styles for different classes.
Exemple
<!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.
C'est la ville la plus peuplée du Royaume-Uni,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
Categorized block-level elements
The HTML <div> element isBlock-level elementsIt can be used as a container for other HTML elements.
Set the class of the <div> element so that we can set the same class for the same <div> element:
Exemple
<!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.
C'est la ville la plus peuplée du Royaume-Uni,
avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la région métropolitaine de Tokyo,</p>
et la plus grande aire métropolitaine du monde.</p>
</div>
</body>
</html>
Élément en ligne classé
L'élément HTML <span> est un élément en ligne, utilisé comme conteneur de texte.
Définir la classe d'un élément <span> permet de définir des styles communs pour des éléments <span> identiques.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>Mon <span class="red">Important</span> En-tête</h1>
</body>
</html>
