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ä:

<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:

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

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

.red {
	color: red;
}

Annettu seuraava koodi:

<p>
	Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
	<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>

Tee elementit, joilla on luokka xxx, koosta 30px.