A tag span para trechos de texto em HTML

Você já sabe que para tornar um determinado trecho de texto, por exemplo, em negrito - deve-se usar a tag b. No entanto, o que fazer se eu quiser colorir um trecho de texto em vermelho? Para esse caso, não existe uma tag similar à tag b.

Porém, existe uma tag especial span - por si só, ela não faz absolutamente nada, mas podemos aplicar estilos CSS a ela, o que nos permitirá adicionar o efeito desejado a um trecho de texto.

Vamos ver um exemplo. Suponha que temos algum texto:

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

Suponha que queremos tornar a palavra "texto" vermelha. Para isso, vamos envolver este trecho de texto na tag span e dar a esta tag alguma classe:

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

Agora, vamos colorir o elemento com essa classe em vermelho:

.red {
	color: red;
}

Dado o seguinte código:

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

Faça os elementos com a classe xxx terem um tamanho de 30px.