Spójrzmy na naszą stronę.
Ma nagłówki,
akapit z opisem królików
oraz kilka innych akapitów
z tekstem mojej ulubionej piosenki o królikach.
Zmieniliśmy styl pierwszego akapitu za pomocą ID.
Skoro jest kilka akapitów ze słowami,
niech wszystkie mają żółte tło.
Jak to uzyskać, wykorzystując to, co już wiemy?
Najpierw nauczyliśmy się
wybierania wszystkich znaczników danego typu,
np. jak z selektorem „p”.
Zmieniał się kolor wszystkich akapitów, nie tylko z piosenką.
Potrzebujemy czegoś konkretniejszego.
Nauczyliśmy się wybierać znaczniki z określonym ID,
np. z ID „kroliki-piosenka”.
Ale wybraliśmy tylko pierwszy akapit.
Nie dodamy tego ID do innych akapitów:
nie wolno przypisywać jednego ID różnym znacznikom.
Gdybyśmy chcieli wybrać inne akapity,
musielibyśmy dać każdemu nowe ID
(np. „tekst-piosenki2” i „tekst-piosenki3"),
bo każde ID jest inne.
I trzeba by do każdego dodać reguły.
Dalibyśmy radę, ale ile przy tym pracy!
Dodając nowy wers do piosenki,
musielibyśmy dodawać nowe ID do HTML,
i jeszcze jedno do reguł CSS.
Dodawanie setek wierszy byłoby wyczerpujące!
Wiecie, co?
Jest lepszy sposób. Klasy.
Klasa to sposób
przypisania elementu do grupy.
Można przypisać ich tyle, ile się chce.
Aby dodać klasę, zaczynamy od atrybutu, jak przy ID.
Skasuję to ID, bo mam wpisać nowe.
Kursor jest w znaczniku początkowym „p”.
Dodaję spację i piszę: class = ""
Teraz potrzebujemy nazwy.
Ładnej, opisowej.
Powiedzmy „teksty-piosenek”.
Wpisałam.
Co jeszcze powinno należeć do tej klasy?
Cała reszta akapitów z tekstami.
Zejdźmy niżej
i dodajmy atrybut każdej z klas akapitu:
„teksty-piosenek”.
Świetnie. Już możemy dodać regułę CSS.
Wracamy do znacznika „style”
i kasuję selektor ID, który wpisaliśmy wcześniej,
bo teraz będzie inny.
Musimy przygotować selektor klasy.
W tym celu użyjemy kropki.
Za nią napiszemy nazwę klasy: teksty-piosenek.
I dalej jak zwykle: klamry, właściwość, dwukropek, wartość.
I już!
Wszystkie teksty są na żółtym tle.
A gdybyśmy napisali duże „S”?
Nic z tego.
Przy klasach także liczy się wielkość.
To ważne, czy litery są wielkie czy małe.
Jak przy ID.
A gdybyśmy zamiast kropki użyli kratki?
Nie działa.
Przeglądarka uznaje „teksty-piosenek” za ID,
a nie mogąc znaleźć atrybutu ID,
rezygnuje.
Co będzie, jeśli w nazwach znajdą się spacje?
Też niedobrze.
W nazwach klas nie wolno ich używać.
Jak się dowiecie,
w CSS spacja oznacza coś bardzo konkretnego.
Poprawmy to.
Jeszcze raz.
Chcąc dodać klasę,
wymyślamy nazwę
i wpisujemy ją do atrybutu klasy w HTML.
Piszemy regułę stylu,
zaczynając od kropki i nazwy klasy.
Teraz wasz CSS ma klasę!