Tag-ul span pentru bucăți de text în HTML

Știți deja că pentru a face o bucată de text, de exemplu, îngroșată - trebuie să folosiți tag-ul b. Totuși, ce să faci dacă vreau să colorez o bucată de text în roșu? Pentru un astfel de caz nu există un tag similar cu tag-ul b.

Însă există un tag special span - el în sine nu face absolut nimic, dar i se pot aplica stiluri CSS, care ne vor permite să adăugăm efectul dorit unei bucăți de text.

Să ne uităm la un exemplu. Să presupunem că avem un text oarecare:

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

Să presupunem că vrem să facem cuvântul "text" roșu. Pentru asta, vom împacheta această bucată de text în tag-ul span și acestui tag îi vom da o clasă oarecare:

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

Și acum să colorăm elementul cu această clasă în roșu:

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>