Klase smo već pomenuli, kada smo pričali o spoljašnjem CSS-u, gde smo videli da se one mogu dodati HTML elementima, kao atributi.

Klase koristimo da bismo strateški dodeljivali CSS elementima. Umesto da gađamo sve elemente jedne vrste, što bi komplikovalo stvari kod ugnježdenih elemenata, mi gađamo klase, i pošto klasa možemo imati koliko hoćemo, dok je broj HTML tagova ograničen (više od 100, ali manje od 150), to je onda jasno da nam klase pružaju mnogo veću fleksibilnost od dodavanja stilova direktno na HTML elemente.

Više elemenata može imati istu klasu.

Takođe, element može da ima i veći broj klasa.

U nekim situacijama, jedna klasa ima vrlo malo stila definisanog na sebi, i koristi se samo u svrhu davanja takvog stila. Recimo klasa border ima crni border debljine 2px pune linije. Ništa drugo. Svaki element kome date tu klasu, će imati takav border. Ovakav stil pisanja klasa je vrlo popularan, i rezultira time da mnogi HTML elementi imaju veliki broj klasa na sebi. Viđaćete to često. Primer jedne biblioteke koja koristi ovakvo pisanje klasa je bootstrap.

Kada gađamo neku klasu, pišemo .imeKlase. Tačka služi da razlikuje selektor klase od selektora taga, koji nemaju predznak:

Elementi koji imaju dve klase, dobiće stil definisan za obe klase. Ako su stilovi te dve klase i sukobu, uvek će pobediti ona koja se u CSS fajlu, nalazi ispod, odnosno, pregažena će biti ona koja je navedena prva.

Imena klasa treba da imaju smisla na duge staze. Nema smisla navoditi ime elementa koji gađate, jer sutra možda pomislite da potpuno isti stil date recimo p tagu, pa bi bilo bezveze ako bi se klasa zvala "zeleniDiv". Za CSS selektore, nije bitno ni koji sadržaj element treba da sadrži. Tako gore pomenuta klasa "poslastica" nema mnogo smisla za CSS, jer ako sličan stil posle hoćete da primenite na spisak automobila, morali biste da koristite klasu poslastica i na njima. Ili da menjate nazive klasa u starom kôdu. Ili da duplirate CSS stil. Klasa "lista" gore navedena je bolji izbor, jer je možete navoditi na bilo kom elementu, i biće jasno da je u pitanju neka stilizacija lista koja se ponavlja na više mesta kroz sajt. Klase kao što je "lista" nazivamo semantičkim. Poslastica je previše specifičan primer, ali je "lista" iste vrste kao i "container" ili "address" ime klase.

Vi uglavnom ne želite da gađate direktno tagove CSS-om, jer ako u nekoj situaciji ne želite da tag ima neko CSS svostvo i date mu klasu, vi morate u CSS-u te klase prvo pregaziti svojstva data tagu, pre nego što možete da mu date njegov jedinstven stil. Tako da je uvek bolje gađati klase. Ako element nema klasu, nema ni stil.

Što se naziva klasa (i id-ijeva) tiče, kako stvari sada stoje, imamo punu slobodu. Možemo ih zvati kako god hoćemo. Preporuka je naravno da imaju smisla onima koji bi čitali kôd. Ideja je da onaj ko čita kôd, može na osnovu naziva klase da zaključi šta tag sadrži.

S tim u vezi, nije posebno informativno ako naziv klase, opisuje izgled elementa. Dakle class="punoIme", ima smisla, ali class="zeleniElement" nema. Ovakvi nazivi klasa su semantički, i imali bi smisla i ako bi se sutra izgled sajta značajno promenio.

Iako imena klasa i id-ijeva nisu standardizovana i tu imamo "punu slobodu kretanja", postoje i oni koji smatraju da nazive klasa treba standardizovati, baš otuda što imaju semantičko značenje. Štaviše, nakon što je google 2009-e počeo u svoje rezultate pretrage da uključuje tzv "bogate snipete" koji pored opisa sajta, sadrže i slike, kritike i ocene posetialca, i slične formatirane informacije, klase su počele da služe kao prostor za definisanja "mikroformata". Google naime zna šta neke vrednosti klasa znače, i koristiće ih da formatira "bogati snipet". Teoretski, bogati snipeti treba da preobrate dosadne rezultate pretrage u nešto šareno i upadljivo na šta bi surferi pre hteli da kliknu. Teoretski, meni sve to zvuči kao da bi organske rezultate pobrkali sa reklamama, a ja ne klkćem na reklame

O mikroformatima će kasnije biti više reči.

Pošto neki id, može da ima jedan i samo jedan element, to ne bi imalo smisla stavljati id na elemente kojih može biti samo po jedan na strani, kao što su recimo <html>, <head>, <body>. Poenta sa id-ijem je da kad se neki element ponavlja više puta, kao što je recimo slučaj sa <p> tagovima, da odaberete samo jedan od njih.

Vi naravno možete i za takav jedinstven element koristiti klasu. Naprosto takvu klasu nećete više drugde koristiti. Zapravo, ovo je preporučeno, i jako retko se koriste id-ijevi za gađanje iz CSS-a. Id-ijevi su jako selektivni, i vrlo je teško pregaziti stil zadat preko id-ija.

Jedan element, može da ima i klasu i id.

O bukmarkovima smo već pričali kada smo radili linkove. Tada smo pomenuli jedan način dodavanja bukmarka, koji je koristio name atribut <a> taga. Korišćenje id-ija je zapravo preferirana opcija.

Pošto je id specifičan za samo jedan element, to se može koristiti i kao bukmark, ka kome se može linkovati, unutar mnogo duže strane. Ovo je zapravo kako se danas id uglavnom i koristi. Za sve ostalo, tu su klase

Sve što je rečeno za dodavanje bukmarka pomoću name atributa, važi i ovde, pa vas neću previše zadržavati. U kôdu to izgleda ovako:

Kada hoćemo da gađamo id, koristimo #

Ovaj CSS bi reči "tobleron" dao slova veličine 20px.

Oni koji imaju i klasu i id, dobiće i stilove za tu klasu i za taj id. Ako su stilovi za klase i id-ijeve u suprotnosti, stil definisan za id će pobediti, jer je specifičniji. Ako bi klasa na tobleroni govorila da veličina slova treba da budu 16px, čak iakao bi klasa bila definisana ispod id-ija u CSS-u, ovaj element bi i dalje imao veličinu slova od 16px, jer to mu stoji u id-iju.