HTML-klasser

Categorize HTML (set class) so that we can define CSS styles for the class of elements.

Set the same style for the same class, or set different styles for different classes.

Exempel

<!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. 
Det är den mest befolkade staden i Förenade kungariket, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

Prova själv

Categorized block-level elements

The HTML <div> element isBlock-level elementsIt can be used as a container for other HTML elements.

Setting the class of the <div> element so that we can set the same class for the same <div> elements:

Exempel

<!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. 
Det är den mest befolkade staden i Förenade kungariket, 
med ett storstadsområde över 13 miljoner invånare.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris är huvudstaden och mest befolkade staden i Frankrike.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo är huvudstaden i Japan, centrum för det större Tokyo-området,</p>
och den mest befolkade storstadsområdet i världen.</p>
</div>
</body>
</html>

Prova själv

Klassificerade inline-element

HTML <span>-elementet är en inline-element, som kan användas som en behållare för text.

Att ställa in klassen för <span>-elementet, kan ge samma stil till lika <span>-element.

Exempel

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {färg:red;}
</style>
</head>
<body>
<h1>Min <span class="red">viktiga</span> rubrik</h1>
</body>
</html>

Prova själv