A span címke szövegrészekhez HTML-ben

Már tudod, hogy ahhoz, hogy egy bizonyos szövegrészt, például félkövérré tegyél, a b címkét kell használnod. De mit kell tenni, ha egy szövegrészt pirosra szeretnék színezni? Ilyen esetre nincs olyan címke, mint a b.

Viszont létezik egy speciális span címke - önmagában abszolút semmit sem csinál, de alkalmazhatunk rá CSS stílusokat, amelyek lehetővé teszik számunkra, hogy a kívánt hatást érjük el a szövegrészben.

Nézzünk egy példát. Tegyük fel, hogy van egy szövegünk:

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

Tegyük fel, hogy a "text" szót pirosra szeretnénk tenni. Ehhez tegyük a szövegrészt span címkébe, és adjunk ennek a címkének valamilyen osztályt:

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

Most pedig színezzük pirosra az ilyen osztállyal rendelkező elemet:

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>