CSS

CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) to język służący do opisywania wyglądu dokumentów HTML: kolorów, typografii, rozmieszczenia elementów, odstępów, tła i animacji. Jego fundamentem jest rozdzielenie prezentacji od struktury — ten sam dokument może wyglądać zupełnie inaczej w zależności od podpiętego arkusza, np. inaczej na ekranie, a inaczej na wydruku.

Jak działa CSS

Arkusz składa się z reguł: selektor wskazuje elementy, a blok deklaracji przypisuje im właściwości, np. h2 { color: navy; margin-top: 2rem; }. O ostatecznym wyglądzie decyduje tytułowa kaskada — algorytm rozstrzygający konflikty reguł na podstawie pochodzenia stylów, specyficzności selektorów i kolejności w kodzie. Uzupełnia ją dziedziczenie: część właściwości (jak kolor tekstu czy czcionka) przechodzi z elementu nadrzędnego na potomne.

Współczesny CSS to dojrzały ekosystem układów i narzędzi:

• Flexbox i Grid — elastyczne układy jedno- i dwuwymiarowe, które zastąpiły łamańce z float,
• media queries i container queries — style zależne od rozmiaru ekranu lub kontenera, podstawa responsywności,
• zmienne (custom properties) — motywy kolorystyczne i tryb ciemny bez duplikowania reguł,
• transformacje, przejścia i animacje — płynne efekty bez JavaScriptu,
• natywne zagnieżdżanie i warstwy (@layer) — porządkowanie dużych arkuszy.

Zastosowanie w praktyce

CSS dostarcza się do przeglądarki jako osobne pliki (najlepsze dla wydajności dzięki cache), znaczniki <style> lub style inline. W większych projektach pisze się go z pomocą metodyk nazewniczych (BEM), frameworków utility-first (Tailwind CSS) albo gotowych bibliotek komponentów (Bootstrap). Procesy budowania minifikują arkusze i usuwają nieużywane reguły, co ma bezpośredni wpływ na szybkość ładowania strony i wyniki Core Web Vitals — nadmiarowy, blokujący renderowanie CSS to jeden z najczęstszych zarzutów audytów wydajności. Umiejętność diagnozowania kaskady w narzędziach deweloperskich przeglądarki pozostaje przy tym codziennym chlebem każdego frontend developera.