0:00:00.326,0:00:02.079
Spójrzmy na naszą stronę.

0:00:02.284,0:00:04.540
Ma nagłówki,

0:00:04.540,0:00:07.580
akapit z opisem królików

0:00:07.580,0:00:10.588
oraz kilka innych akapitów

0:00:10.588,0:00:13.416
z tekstem mojej ulubionej[br]piosenki o królikach.

0:00:13.543,0:00:17.554
Zmieniliśmy styl pierwszego[br]akapitu za pomocą ID.

0:00:17.857,0:00:21.016
Skoro jest kilka akapitów[br]ze słowami,

0:00:21.016,0:00:24.083
niech wszystkie mają żółte tło.

0:00:24.613,0:00:27.692
Jak to uzyskać, wykorzystując[br]to, co już wiemy?

0:00:28.221,0:00:30.374
Najpierw nauczyliśmy się

0:00:30.374,0:00:33.002
wybierania wszystkich znaczników[br]danego typu,

0:00:33.002,0:00:34.659
np. jak z selektorem „p”.

0:00:34.886,0:00:39.120
Zmieniał się kolor wszystkich[br]akapitów, nie tylko z piosenką.

0:00:39.226,0:00:41.290
Potrzebujemy[br]czegoś konkretniejszego.

0:00:41.507,0:00:44.898
Nauczyliśmy się wybierać[br]znaczniki z określonym ID,

0:00:44.898,0:00:48.140
np. z ID „kroliki-piosenka”.

0:00:48.368,0:00:50.920
Ale wybraliśmy[br]tylko pierwszy akapit.

0:00:51.120,0:00:53.725
Nie dodamy tego ID[br]do innych akapitów:

0:00:53.725,0:00:57.657
nie wolno przypisywać jednego[br]ID różnym znacznikom.

0:00:57.867,0:01:00.202
Gdybyśmy chcieli wybrać[br]inne akapity,

0:01:00.202,0:01:02.881
musielibyśmy dać każdemu[br]nowe ID

0:01:02.881,0:01:05.717
(np. „tekst-piosenki2” [br]i „tekst-piosenki3"),

0:01:05.717,0:01:07.358
bo każde ID jest inne.

0:01:07.358,0:01:09.808
I trzeba by do każdego[br]dodać reguły.

0:01:09.808,0:01:12.398
Dalibyśmy radę,[br]ale ile przy tym pracy!

0:01:12.398,0:01:14.691
Dodając nowy wers do piosenki,

0:01:14.691,0:01:17.279
musielibyśmy dodawać[br]nowe ID do HTML,

0:01:17.279,0:01:19.018
i jeszcze jedno do reguł CSS.

0:01:19.018,0:01:22.830
Dodawanie setek wierszy[br]byłoby wyczerpujące!

0:01:22.980,0:01:24.315
Wiecie, co?

0:01:24.492,0:01:27.383
Jest lepszy sposób. Klasy.

0:01:27.599,0:01:29.009
Klasa to sposób

0:01:29.009,0:01:32.067
przypisania elementu do grupy.

0:01:32.162,0:01:35.150
Można przypisać ich tyle,[br]ile się chce.

0:01:35.352,0:01:39.928
Aby dodać klasę, zaczynamy[br]od atrybutu, jak przy ID.

0:01:40.362,0:01:44.705
Skasuję to ID,[br]bo mam wpisać nowe.

0:01:44.705,0:01:47.915
Kursor jest w znaczniku[br]początkowym „p”.

0:01:47.915,0:01:51.675
Dodaję spację i piszę: [br]class = ""

0:01:53.183,0:01:55.333
Teraz potrzebujemy nazwy.

0:01:55.333,0:01:56.792
Ładnej, opisowej.

0:01:56.927,0:01:59.294
Powiedzmy „teksty-piosenek”.

0:01:59.658,0:02:01.449
Wpisałam.

0:02:01.665,0:02:04.335
Co jeszcze powinno[br]należeć do tej klasy?

0:02:04.416,0:02:06.420
Cała reszta akapitów z tekstami.

0:02:06.510,0:02:09.154
Zejdźmy niżej

0:02:09.154,0:02:12.777
i dodajmy atrybut[br]każdej z klas akapitu:

0:02:13.061,0:02:14.540
„teksty-piosenek”.

0:02:14.836,0:02:18.003
Świetnie. Już możemy[br]dodać regułę CSS.

0:02:18.217,0:02:20.539
Wracamy do znacznika[br]„style”

0:02:20.539,0:02:24.574
i kasuję selektor ID,[br]który wpisaliśmy wcześniej,

0:02:24.574,0:02:25.772
bo teraz będzie inny.

0:02:26.157,0:02:28.594
Musimy przygotować selektor klasy.

0:02:28.931,0:02:34.039
W tym celu użyjemy kropki.

0:02:34.426,0:02:39.027
Za nią napiszemy nazwę[br]klasy: teksty-piosenek.

0:02:39.027,0:02:46.415
I dalej jak zwykle: klamry,[br]właściwość, dwukropek, wartość.

0:02:46.633,0:02:47.575
I już!

0:02:47.821,0:02:51.007
Wszystkie teksty[br]są na żółtym tle.

0:02:51.343,0:02:55.143
A gdybyśmy napisali duże „S”?

0:02:55.240,0:02:56.398
Nic z tego.

0:02:56.491,0:02:58.950
Przy klasach także[br]liczy się wielkość.

0:02:58.966,0:03:01.771
To ważne, czy litery są[br]wielkie czy małe.

0:03:01.771,0:03:03.558
Jak przy ID.

0:03:04.323,0:03:08.295
A gdybyśmy zamiast kropki[br]użyli kratki?

0:03:08.542,0:03:09.666
Nie działa.

0:03:09.774,0:03:13.085
Przeglądarka uznaje[br]„teksty-piosenek” za ID,

0:03:13.085,0:03:16.411
a nie mogąc znaleźć[br]atrybutu ID,

0:03:16.411,0:03:17.584
rezygnuje.

0:03:18.102,0:03:24.512
Co będzie, jeśli w nazwach[br]znajdą się spacje?

0:03:25.248,0:03:27.477
Też niedobrze.

0:03:27.477,0:03:29.997
W nazwach klas nie wolno[br]ich używać.

0:03:30.192,0:03:31.649
Jak się dowiecie,

0:03:31.649,0:03:34.972
w CSS spacja oznacza[br]coś bardzo konkretnego.

0:03:35.868,0:03:38.776
Poprawmy to.

0:03:39.523,0:03:41.110
Jeszcze raz.

0:03:41.110,0:03:43.387
Chcąc dodać klasę,

0:03:43.387,0:03:45.589
wymyślamy nazwę

0:03:45.589,0:03:49.000
i wpisujemy ją do atrybutu[br]klasy w HTML.

0:03:49.248,0:03:51.317
Piszemy regułę stylu,

0:03:51.317,0:03:54.691
zaczynając od kropki[br]i nazwy klasy.

0:03:55.216,0:03:58.428
Teraz wasz CSS ma klasę!