Atribut class

Atribut class postavlja jednu ili više klasa za element (pod elementom se podrazumeva tag).

Ovo se radi da bi se zatim preko CSS-a pristupilo grupi elemenata koji imaju postavljenu istu klasu, i primenila za nju određena svojstva (na primer, promenio boju teksta, veličinu fonta i tako dalje).

Postoji takođe atribut id, koji slično atributu class dozvoljava izbor elemenata na HTML stranici.

Razlika između atributa class i atributa id je u tome što class bira grupu elemenata (čak i ako je dat jednom elementu - kasnije se može dati i drugom), a id bira jedinstveni element (ne sme biti više elemenata sa takvim id-om na stranici sajta, inače će doći do konflikta).

Kako razumeti, šta dati elementu - klasu ili id? Klasa se daje onim elementima koji se ponavljaju na stranicama sajta (da se ne bi nekoliko puta pisao isti CSS kod). Čak i ako vam je trenutno taj element jedan, ali osećate, da slični elementi mogu da se pojave u budućnosti - dajte tom elementu klasu. Ako ste sigurni da je takav element jedinstven - onda mu dajte id. Iako u današnje vreme postoji tendencija da se svim elementima daje klasa, a id ostavi za JavaScript, ali ona nije opšteprihvaćena.

Elementu se mogu zadati više klasa, u tom slučaju one se trebaju navoditi razmakom.

Nazivi klasa treba da budu napisani engleskim slovima, brojevima, bez razmaka (razmak odvaja klase jednu od druge, umesto njega se može koristiti donja crta ili crtica). Klase ne treba da počinju brojem (u HTML5 već može, ali neće raditi u starijim pregledačima).

Imena klasama treba davati na engleskom jeziku (a ne na srpskom, prosto engleskim slovima!). Imena treba da budu smislena, da odražavaju suštinu klase.

Primer

Dajmo svim pasusima sa klasom test zadat ćemo crvenu boju teksta:

<p class="test">Pasus sa klasom test.</p>
<p>Kontrolni pasus bez klase.</p>

.test {
	color: red;
}

Primer . Više klasa za element

A ovde dajmo prvom pasusu nekoliko klasa - test1 i test2 (zabeležimo ih razmakom). Klasa test1 zadaje crvenu boju tekstu, a klasa test2 zadaje veličinu fonta od 20px. Drugom pasusu je data samo klasa test1 (ovaj pasus će postati crven), a trećem pasusu - klasa test2 (ovaj pasus će imati veličinu fonta od 20px). Prvi pasus, koji ima dve klase, će imati istovremeno i crvenu boju i veličinu fonta od 20px:

<p class="test1 test2">Pasus sa dve klase test1 i test2.</p>
<p class="test1">Pasus sa klasom test1.</p>
<p class="test2">Pasus sa klasom test2.</p>
<p>Kontrolni pasus bez klasa.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Pogledajte takođe

atribut id,
koji postavlja jedinstvene identifikatore elementima