CSS (Cascading Style Sheets) to język arkuszy stylów, który opisuje wygląd stron internetowych: kolory, czcionki, odstępy i układ elementów. Oddziela warstwę prezentacji od struktury zapisanej w HTML.
Jak działa CSS?
Reguły składają się z selektora i deklaracji, np. p { color: #333; }. Przeglądarka dopasowuje je do elementów strony i stosuje według kaskady, czyli kolejności, specyficzności i ważności.
Jak dołączyć style do strony?
Najlepiej w zewnętrznym pliku .css podpiętym w head. Style można też zapisać w znaczniku style albo bezpośrednio w atrybucie, ale utrudnia to utrzymanie i buforowanie.
Nowoczesny układ w CSS
Do układów służą Flexbox i CSS Grid, a do dopasowania do ekranów media queries. Dobrze napisany CSS wpływa też na wydajność, bo blokuje renderowanie, dopóki nie zostanie wczytany.
Kaskada i specyficzność
Nazwa „kaskadowe arkusze stylów” wzięła się stąd, że o końcowym wyglądzie elementu decyduje kolejność i waga reguł: źródło stylu, specyficzność selektora, a przy równej wadze kolejność w pliku. Selektor identyfikatora jest silniejszy niż klasy, a klasa silniejsza niż nazwa znacznika. Znacznik !important przełamuje te zasady, więc nadużywany utrudnia późniejsze zmiany. Dlatego dobre praktyki zalecają płaskie selektory oparte na klasach.
Nowoczesny CSS obejmuje zmienne, funkcje clamp() i calc(), zapytania kontenerowe oraz zagnieżdżanie reguł. Specyfikacje rozwija konsorcjum W3C.
