Klase elemenata u CSS

U prethodnim lekcijama smo birali elemente stranice po imenu taga, zadajući stilove, na primer, istovremeno svim pasusima. Na stranici, međutim, mogu postojati pasusi različitih tipova, na koje treba primeniti različite stilove. Za rešavanje ovakvog problema možemo različite pasuse svrstati u različite CSS klase.

Da bismo svrstali tag u neku klasu, potrebno je tom tagu napisati atribut class, a u njemu - naziv klase koji ste vi smislili, koji se sastoji od slova, cifara, simbola donje crte i crtice.

Hajde da pogledamo na primeru. Napravićemo pasuse sa dve vrste klasa - eee i zzz:

<p class="eee">
	pasus sa klasom eee
</p>
<p class="eee">
	pasus sa klasom eee
</p>
<p class="zzz">
	pasus sa klasom zzz
</p>
<p class="zzz">
	pasus sa klasom zzz
</p>

Hajde sada da pristupimo u CSS pasusima sa različitim klasama i zadamo im neke stilove. Na primer, obojimo pasuse sa klasom zzz u crvenu boju, a pasuse sa klasom eee - u zelenu.

Za ovo u CSS fajlu treba da pristupimo našim klasama. Pristup ima sledeću sintaksu: prvo ide znak tačka, a zatim ime klase koje smo mi smislili. Odnosno za pristup klasi eee treba napisati .eee, a za klasu zzz - napisati .zzz.

Dakle, uradimo opisano. Dodajmo našem HTML-u i CSS stilove za unete klase:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Ako pokrenemo naš kod, kao rezultat ćemo dobiti sledeće:

Dat je sledeći kod:

<ul>
	<li class="odd">tekst</li>
	<li class="eve">tekst</li>
	<li class="odd">tekst</li>
	<li class="eve">tekst</li>
	<li class="odd">tekst</li>
	<li class="eve">tekst</li>
</ul>

Obojite u crvenu boju elemente sa klasom odd i u zelenu boju - elemente sa klasom eve.

Dat je sledeći kod:

<h2 class="eee">Naslov</h2>
<p class="eee">
	pasus
</p>
<p class="eee">
	pasus
</p>
<p>
	pasus bez klase
</p>

<ul class="eee">
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Obojite u crvenu boju sve elemente sa klasom eee.

Objasnite, zašto se u prethodnom zadatku u crvenu boju boje tagovi li, iako je klasa, koja zadaje boju, dodeljena tagu ul.