HTML Classes

Categoriseer HTML (stel klassen in), zodat we CSS-stijlen kunnen definiëren voor de klassen van elementen.

Stel dezelfde stijlen in voor dezelfde klassen of verschillende stijlen voor verschillende klassen.

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Londen</h2>
<p>
Londen is de hoofdstad van Engeland. 
Het is de meest bevolkte stad in het Verenigd Koninkrijk, 
met een stedelijk gebied van meer dan 13 miljoen inwoners.
</p>
</div> 
</body>
</html>

Probeer het zelf

Gecategoriseerde blokelementen

De HTML <div>-element isBlokselementenHet kan dienen als container voor andere HTML-elementen.

Stel de klasse van het <div>-element in, zodat we dezelfde klasse kunnen instellen voor dezelfde <div>-elementen:

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Londen</h2>
<p>Londen is de hoofdstad van Engeland. 
Het is de meest bevolkte stad in het Verenigd Koninkrijk, 
met een stedelijke regio van meer dan 13 miljoen inwoners.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is de hoofdstad en meest bevolkte stad van Frankrijk.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,</p>
en de meest bevolkte stedelijke regio ter wereld.</p>
</div>
</body>
</html>

Probeer het zelf

Categorie lijnelementen

Het HTML <span> element is een lijnelement en kan worden gebruikt als een container voor tekst.

Het instellen van de klasse van een <span> element, kan dezelfde stijl instellen voor dezelfde <span> elementen.

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {kleur:rood;}
</style>
</head>
<body>
<h1>My <span class="red">Belangrijke</span> Titel</h1>
</body>
</html>

Probeer het zelf