Dużo już zrobiliśmy
z selektorami CSS:

wybieramy elementy
według znacznika, ID i klasy.

Powtórzmy wszystko
na przykładzie tej strony.

Dotyczy ona pączków.

Ma nagłówek, akapity…

niektóre akapity są krótkie,
jednowierszowe.

CSS zaczyna się od reguły wyboru
wszystkich znaczników „p"

i określeniu rodziny czcionek
bezszeryfowych.

Zmienię czcionkę na monospace,
żebyście widzieli wybór.

Widzicie?

Następna reguła wybiera
element o ID „donut-header”.

Wiemy, że wybiera ID,
bo zaczyna się kratką.

ID jest opisowe,

wygląda na to, że wybiera
nagłówek u góry

i zmienia czcionkę.

Przewinę w dół i sprawdzę,
czy „h1” ma ID.

Wszystko się zgadza.

Ostatnia reguła wybiera
wszystkie elementy klasy „fakt”.

Wiemy, że to klasa,
bo zaczyna się od kropki.

Aby dowiedzieć się,
który element korzysta

z tej klasy, mogę sprawdzić,
co robi reguła,

dodając obramowanie
i dopełnienie…

lub poszukać nazwy klasy
w kodzie HTML.

Widzę nazwę w tym akapicie.

I w tym też.

Dwa akapity
z jednoliniowymi faktami.

Dlatego mają obramowanie.

Klasy są świetne,

bo można nadać ten sam styl
wielu elementom.

Z klasami możemy zrobić więcej.

Zaraz pokażę, co.

Mamy stronę o pączkach.

Nie są zbyt zdrowe!

Mogą być nawet bardzo niezdrowe!

I uzależniają
z powodu ogromnej ilości cukru.

Jeśli robimy o nich całą stronę,

powinniśmy ostrzec ludzi,
że są niezdrowe.

Może damy ten fakt w czerwieni,
żeby naprawdę ostrzegał?

Jak to zrobimy?

Dodajmy właściwość „color”
do reguły CSS „fact”.

Zobaczmy co się wydarzyło.

Oba fakty stały się czerwone,
a drugi nie jest ostrzeżeniem.

Dotyczy tylko pisowni.

Nie chcemy, by był czerwony.

Możemy dodać ID,

ale gdybyśmy chcieli później
pokolorować inne ostrzeżenia

i dodać nowe,

to musielibyśmy dodawać ID
i reguły dla nich.

W tym przypadku najlepiej jest
dodać kolejną klasę do znacznika „p”.

Przeglądarki pozwalają
dodać ich tyle, ile chcemy.

Umieszczamy kursor
po nazwie ostatniej klasy,

robimy spację i piszemy nazwę
nowej klasy, np. „ostrzeżenie”.

Teraz zróbmy regułę ostrzeżenia

i włączmy w nią właściwość koloru.

Główny fakt jest czerwony,
a drugi nie.

Pięknie!

Możemy nadać klasę
wielu elementom, jak wcześniej.

Np. pokolorujemy pogrubiony tekst,
„smażone w głębokim tłuszczu”,

damy to na czerwono,
bo takie smażenie

często jest nazywane niezdrowym.

Dodamy więc class="warning"

również czerwień.

Zauważcie, że ostrzeżenie
ma kolor czerwony

oraz krawędzie - górną i dolną.

Tak jest przy używaniu wielu klas.

Przeglądarka spojrzy
na wszystkie reguły

i zastosuje odpowiednie style.

Ale, przekazując sens,
nie poprzestawajmy na kolorze,

bo przecież są daltoniści.

Niektórzy prawie nie widzą różnicy

między czerwienią a czernią.
Może wy też!

Zmieńmy klasę,
by wszyscy ją zauważyli.

Ten kolor zmienimy w kolor tła,

bo każdy widzi, gdy coś ma tło.

Niewielki kontrast, czerwień i czerń.

A kontrast jest ważny,
by strona była czytelna.

Zróbmy tu biały.

Teraz mamy białe litery

i czerwone tło
dla tych, którzy widzą czerwień.

Zastosowaliśmy klasę, więc oba
ostrzeżenia mają ten sam styl.

Dzięki elastyczności klas CSS

możemy uratować świat
przed pączkami.