Classi HTML

Categorize HTML (set classes) 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.

Esempio

<!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. 
È la città più popolosa del Regno Unito, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

Prova personalmente

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 allows us to set the same class for the same <div> elements:

Esempio

<!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. 
È la città più popolosa del Regno Unito, 
con un'area metropolitana di oltre 13 milioni di abitanti.</p>
</div>
<div class="cities">
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolosa della Francia.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e l'area metropolitana più popolosa del mondo.</p>
</div>
</body>
</html>

Prova personalmente

Elementi inline di categoria

L'elemento <span> HTML è un elemento inline, che può essere utilizzato come contenitore di testo.

Impostare la classe dell'elemento <span> può applicare stili identici agli elementi <span> identici.

Esempio

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>Mio <span class="red">Importante</span> Intestazione</h1>
</body>
</html>

Prova personalmente