Span-elementti tekstin osien muotoiluun HTML:ssä

Tiedät jo, että jos haluat tehdä tietystä tekstin osasta, esimerkiksi, lihavoitun - sinun tulisi käyttää elementtiä b. Kuitenkin, mitä tehdä, jos haluan värjätä tekstinpätkän punaiseksi? Tällaista tapausta varten elementtiä, kuten b, ei ole olemassa.

Sen sijaan on olemassa erityinen elementti span - itsessään se ei tee mitään, mutta sille voidaan soveltaa CSS-tyylejä, jotka antavat meille mahdollisuuden lisätä haluttu efekti tekstinpätkälle.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on jotain tekstiä:

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

Oletetaan, että haluamme tehdä sanan "text" punaiseksi. Tätä varten käärimme tämän tekstinpätkän elementtiin span ja annamme tälle elementille jotain luokkaa:

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

No, nyt värjätään elementti tällaisella luokalla punaiseksi:

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>