Tag span per frammenti di testo in HTML

Sai già che per rendere un certo frammento di testo, ad esempio, in grassetto - si dovrebbe usare il tag b. Tuttavia, cosa fare se voglio colorare un frammento di testo in rosso? Per un caso del genere non esiste un tag simile al tag b.

Invece esiste un tag speciale span - di per sé non fa assolutamente nulla, ma ad esso si possono applicare stili CSS, che ci permetteranno di aggiungere l'effetto desiderato a un frammento di testo.

Vediamo un esempio. Supponiamo che abbiamo del testo:

<p>
	This is a paragraph with text.
</p>

Supponiamo di voler rendere la parola "text" rossa. Per fare questo, avvolgiamo questo frammento di testo nel tag span e diamo a questo tag una qualche classe:

<p>
	This is a paragraph with <span class="red">text</span>.
</p>

Ora coloriamo l'elemento con questa classe in rosso:

.red {
	color: red;
}

Dato il seguente codice:

<p>
	Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
	<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>

Rendi gli elementi con la classe xxx di dimensione di 30px.