Po tej lekcji potrafisz
Połączyć selektor z elementem oraz zrozumieć dziedziczenie i kaskadę.
Reguła CSS składa się z selektora i deklaracji. Selektor body obejmuje cały korpus strony. Część właściwości, na przykład color, jest dziedziczona przez elementy potomne. Klasa pozwala oznaczyć wybrane elementy bez zmiany ich znaczenia. W razie konfliktu przeglądarka rozstrzyga m.in. po specyficzności, a dla równie ważnych reguł także po kolejności.
Wklej do style.css. Ten sam arkusz jest podłączony do obu podstron. Rem odnosi się do rozmiaru pisma elementu głównego; line-height bez jednostki skaluje interlinię razem z tekstem.
body {
margin: 0;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #17212b;
background: #f6f8fa;
}
h1, h2 { line-height: 1.2; }
a { color: #075e68; }
.wstep { font-size: 1.25rem; }<p class="wstep">Tworzymy strony, które pomagają innym.</p>Teraz Twoja kolej
Dodaj klasę wstep do pierwszego akapitu w main. W narzędziach deweloperskich zaznacz ten akapit i odnajdź regułę font-size.
Sprawdź rozwiązanie i oczekiwany efekt
Pierwszy akapit ma większy tekst. Zmiana body wpływa na obie podstrony. Jeśli reguła jest przekreślona w panelu stylów, inna reguła ją nadpisuje; sprawdź selektor i kolejność, zanim użyjesz !important.
Na co uważać
Nie usuwaj podkreślenia ze wszystkich linków bez innego czytelnego wyróżnienia. Sam kolor bywa niewystarczający.
Zanim przejdziesz dalej: wykonaj ćwiczenie samodzielnie i dopiero wtedy oznacz lekcję jako ukończoną. Oznaczenie zapisuje Twój postęp, nie jest oceną nauczyciela.