---
title: "CSS"
description: "CSS to język arkuszy stylów opisujący wygląd stron WWW: kolory, układ, typografię i animacje. Poznaj zasadę kaskady, selektory i nowoczesne techniki."
url: "https://nodea.pl/pl/slownik-pojec/css"
lang: "pl"
updated: "2026-07-13"
---

# CSS

> CSS (Cascading Style Sheets, kaskadowe arkusze stylów) to język opisujący wygląd dokumentów HTML — kolory, typografię, układ i animacje — oddzielający prezentację od struktury treści.

**CSS** (ang. *Cascading Style Sheets*, kaskadowe arkusze stylów) to język służący do opisywania wyglądu dokumentów [HTML](https://nodea.pl/pl/slownik-pojec/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](https://nodea.pl/pl/slownik-pojec/media-query) i container queries** — style zależne od rozmiaru ekranu lub kontenera, podstawa [responsywności](https://nodea.pl/pl/slownik-pojec/responsywnosc),
- **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.

### Czym różni się CSS od HTML i JavaScriptu?

HTML definiuje strukturę i treść strony (nagłówki, akapity, obrazy), CSS — jej wygląd (kolory, układ, czcionki), a JavaScript — zachowanie i interaktywność. To trzy filary frontendu: każdy odpowiada za inną warstwę i dopiero razem tworzą kompletną stronę.

### Czy warto dziś używać preprocesorów typu Sass lub Less?

Coraz rzadziej są niezbędne — natywny CSS ma już zmienne (custom properties), zagnieżdżanie selektorów i funkcje matematyczne. Preprocesory wciąż bywają przydatne w dużych, starszych projektach ze względu na mixiny i istniejącą bazę kodu, ale nowe projekty często radzą sobie czystym CSS-em.

## Powiązane

- [HTML](https://nodea.pl/pl/slownik-pojec/html)
- [JavaScript](https://nodea.pl/pl/slownik-pojec/javascript)
- [Media query](https://nodea.pl/pl/slownik-pojec/media-query)
- [Responsywność](https://nodea.pl/pl/slownik-pojec/responsywnosc)
- [LESS](https://nodea.pl/pl/slownik-pojec/less)

---

Wersje językowe: [en](https://nodea.io/en/glossary/css.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)