Oznaka span za koščke besedila v HTML

Že veste, da za označitev določenega koščka besedila, na primer krepko - uporabite oznako b. Toda, kaj storiti, če želim košček besedila obarvati rdeče? Za takšen primer oznake, podobne oznaki b, ni.

Obstaja pa posebna oznaka span - sama po sebi ne naredi absolutno nič, vendar ji lahko uporabimo CSS sloge, ki nam bodo omogočili, da dodamo želeni učinek koščku besedila.

Poglejmo si primer. Recimo, da imamo nekaj besedila:

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

Recimo, da želimo besedo "text" obarvati rdeče. Za to ovijmo ta košček besedila v oznako span in tej oznaki dajmo kakšen razred:

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

No, zdaj pa pobarvajmo element s takšnim razredom rdeče:

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>