CSS (Cascading Style Sheets, czyli kaskadowe arkusze stylów) to język, który mówi przeglądarce, jak ma wyglądać strona napisana w HTML: jakie kolory, czcionki, odstępy, układ kolumn i animacje. HTML opisuje, co jest na stronie (nagłówek, akapit, przycisk), a CSS opisuje, jak to ma się prezentować. Dzięki temu oddzielasz warstwę treści od warstwy wyglądu — ten sam dokument HTML możesz ubrać w zupełnie różne style, nie ruszając ani jednej linijki tekstu.
Jak to działa
CSS składa się z reguł: selektor wskazuje element, a w nawiasach klamrowych podajesz pary właściwość: wartość. Na przykład p { color: #333; font-size: 16px; } nada wszystkim akapitom ciemnoszary kolor i rozmiar 16 pikseli. Selektory mogą celować w tag (p), klasę (.menu), identyfikator (#header) albo cokolwiek bardziej wyrafinowanego.
Słowo „kaskadowe” w nazwie nie jest przypadkiem. Gdy kilka reguł dotyczy tego samego elementu, przeglądarka rozstrzyga konflikt według specyficzności selektora, kolejności w pliku i ważności (!important). Do tego dochodzi dziedziczenie — część właściwości (jak color czy font-family) spływa z rodzica na dzieci. To właśnie ten mechanizm najczęściej zaskakuje początkujących: „dlaczego mój styl się nie zastosował?” — bo wygrała reguła o wyższej specyficzności.
Przykład z praktyki
Załóżmy, że robisz responsywny layout. Zamiast kombinować z float jak w 2010 roku, używasz Flexbox albo Grid. Wyśrodkowanie elementu w obu osiach to dziś dosłownie trzy linijki:
.box { display: flex; justify-content: center; align-items: center; }
A żeby strona dostosowała się do telefonu, dodajesz media query: @media (max-width: 600px) { .menu { flex-direction: column; } }. W realnych projektach często nie piszesz tego ręcznie tylko korzystasz z frameworka jak Tailwind CSS (klasy typu flex items-center w HTML) albo preprocesora Sass, który dorzuca zmienne, zagnieżdżanie i funkcje.
Na co uważać
Najczęstsze pułapki: nadużywanie !important, które zamienia arkusz w pole bitwy, oraz walka ze specyficznością (zbyt długie selektory typu #nav ul li a span). Mit, który warto obalić: CSS to nie język programowania w klasycznym sensie — nie ma pętli ani warunków (choć @container, zmienne --custom-property i funkcje jak clamp() coraz bardziej go w tę stronę pchają). Pamiętaj też o testowaniu w różnych przeglądarkach — wsparcie nowych funkcji sprawdzisz na bieżąco.
Pojęcia powiązane: HTML, DOM, Flexbox, Grid, media queries, specyficzność, box model, Sass, Tailwind CSS, responsywność.