Atributul class este tot un atribut html, al carui valoare se poate repeta, nu trebuie sa fie unica per pagina precum in cazul id-ului.
De exemplu, putem folosi codul HTML din exemplul trecut. Vom sterge toate atributele de tip id si vom adauga noul atribut doar primului <h1>:
<html>
<head>
<style>
</style>
</head>
<body>
<h1 class="culoare-albastra">Un element h1</h1>
<h1>Al doilea element h1</h1>
</body>
</html>
De asemenea am sters si continutul din tag-ul <style>.
Trebuie sa scriem un nou selector css care sa se refere la tag-ul cu un atribut class ce are valoarea "culoare-albastra".
Stim ca pentru a ne referi la id-ul unui element folosim semnul # si apoi valoarea id-ului. Pentru a ne referi la atributul class a unui element ne vom folosi de semnul . (un punct) si apoi valoarea atributului.
De exemplu:
.culoare-albastra {
color: blue;
}
De asemenea nu va trebuie sa avem nici un spatiu intre . si valoarea culoare-albastra.
Daca le punem pe toate la un loc, va arata astfel:
<html>
<head>
<style>
.culoare-albastra {
color: blue;
}
</style>
</head>
<body>
<h1 class="culoare-albastra">Un element h1</h1>
<h1>Al doilea element h1</h1>
</body>
</html>Pana acum totul este similar cu folosirea unui id. Dezanvatajul era ca acel id puteam sa il folosim doar pe un singur element.
Dar atributul class il putem folosi pe mai multe elemente. Aceasta inseamna ca acea regula css se va aplica pentru toate elementele care au un atribut cu acea valoare.
De exemplu haideti sa punem atributul si pe al doilea element:
<html>
<head>
<style>
.culoare-albastra {
color: blue;
}
</style>
</head>
<body>
<h1 class="culoare-albastra">Un element h1</h1>
<h1 class="culoare-albastra">Al doilea element h1</h1>
</body>
</html>
Iar in acest moment ambele elemente <h1> vor avea culoarea albastra.
Moduri de a ne adresa unui element
Pana acum am vorbit ca din CSS ne putem adresa unui element HTML prin trei metode:
- numele tag-ului: in acest caz, toate tag-urile din pagina vor fi afectate
- atributul class: doar elementele care au acel atribut cu acea valoare vor fi afectate
- atributul id: doar un singur element poate fi afectat
Asadar, fiecare metoda are avantaje si dezavantaje si noi va trebui sa o alegem pe cea mai potrivita in functie de ceea ce vrem sa schimbam. Daca vrem sa schimbam toate paragrafele din pagina, vom folosi prima metoda. Daca vrem doar sa schimbam un titlu o vom folosi pe a treia.