Tag span pro kousky textu v HTML

Už víte, že pro to, aby byl určitý kousek textu, například, tučný - je třeba použít tag b. Avšak, co dělat, když chci obarvit kousek textu na červeno? Pro takový případ tag, podobný tagu b, neexistuje.

Ale existuje speciální tag span - sám o sobě absolutně nic nedělá, ale lze na něj aplikovat CSS styly, které nám umožní přidat požadovaný efekt ke kousku textu.

Podívejme se na příklad. Předpokládejme, že máme nějaký text:

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

Předpokládejme, že chceme slovo "text" udělat červené. K tomu obalíme tento kousek textu tagem span a tomuto tagu dáme nějakou třídu:

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

Nyní obarvíme element s takovou třídou na červeno:

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>