Etiqueta span para fragmentos de texto en HTML

Ya sabes que para hacer un fragmento de texto, por ejemplo, en negrita - debes usar la etiqueta b. Sin embargo, ¿qué hacer si quiero colorear un fragmento de texto en rojo? Para ese caso no existe una etiqueta similar a b.

Pero existe una etiqueta especial span - por sí sola no hace absolutamente nada, pero se le pueden aplicar estilos CSS que nos permitirán agregar el efecto deseado a un fragmento de texto.

Veamos un ejemplo. Supongamos que tenemos algún texto:

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

Supongamos que queremos poner la palabra "texto" en rojo. Para ello, envolveremos este fragmento de texto en la etiqueta span y le daremos a esta etiqueta alguna clase:

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

Y ahora coloreemos el elemento con esta clase en rojo:

css.red {
  color: red;
}

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