CSS (Cascading Style Sheets — kaskadowe arkusze stylów) to język, który kontroluje wygląd stron internetowych. HTML definiuje strukturę (nagłówki, paragrafy, obrazki, linki), a CSS mówi przeglądarce, jak te elementy mają wyglądać: jaki kolor tekstu, jakie tło, jaka czcionka, jak duże marginesy, jak rozmieścić elementy na stronie, jak animować przyciski.
Bez CSS internet wyglądałby jak dokument z lat 90. — czarny tekst na białym tle, linki niebieskie i podkreślone, zero layoutu. CSS zamienia surowy HTML w wizualnie atrakcyjne strony z responsive design, gradientami, cieniami, gridami i animacjami.
HTML vs CSS vs JavaScript — podział ról
| Technologia | Rola | Analogia (dom) |
|---|---|---|
| HTML | Struktura i treść | Cegły, ściany, fundamenty |
| CSS | Wygląd i layout | Farba, tapeta, meble, oświetlenie |
| JavaScript | Interakcja i logika | Prąd, automatyka, inteligentny dom |
HTML bez CSS = szkielet strony bez wyglądu. CSS bez HTML = reguły stylów, które nie mają czego stylować. Oba są potrzebne — dlatego nauka CSS jest naturalnym drugim krokiem po HTML.
Jak CSS wygląda — podstawowa składnia
CSS składa się z reguł. Każda reguła ma selektor (co stylujemy) i deklaracje (jak stylujemy):
h1 {
color: #333333;
font-size: 32px;
margin-bottom: 16px;
}Czytamy: „wszystkie elementy <h1> mają mieć kolor tekstu ciemnoszary (#333), rozmiar czcionki 32 piksele i dolny margines 16 pikseli”.
Anatomia reguły CSS
- Selektor (
h1) — wskazuje, które elementy HTML dostaną styl. Może być: tag (p,h1,div), klasa (.klasa), identyfikator (#id), atrybut, pseudo-klasa. - Właściwość (
color,font-size) — co zmieniamy. - Wartość (
#333333,32px) — na co zmieniamy. - Deklaracja = właściwość + wartość, zakończona średnikiem.
- Blok deklaracji = nawiasy klamrowe
{ }z jedną lub wieloma deklaracjami.
Trzy sposoby dodania CSS do strony
1. Zewnętrzny plik CSS (zalecany)
Tworzysz osobny plik style.css i linkujesz go w <head> strony HTML:
<link rel="stylesheet" href="style.css">Zalety: jeden plik CSS dla wielu stron (spójny wygląd), przeglądarka cache’uje plik (szybsze ładowanie), czysty podział HTML (struktura) od CSS (wygląd).
2. CSS w tagu style (wewnętrzny)
<head>
<style>
h1 { color: blue; }
p { font-size: 16px; }
</style>
</head>Używany do małych stron lub gdy potrzebujesz stylów specyficznych dla jednej strony. Wadą jest brak możliwości cache’owania i duplikacja kodu między stronami.
3. CSS inline (w atrybucie style)
<p style="color: red; font-size: 20px;">Tekst czerwony</p>Unikaj inline CSS w produkcji — miesza strukturę z wyglądem, nie da się cache’ować, trudny w utrzymaniu. Używany głównie w emailach HTML (gdzie zewnętrzny CSS nie działa) i do szybkich testów.
Kaskadowość — dlaczego „Cascading”?
Nazwa CSS zawiera „Cascading” (kaskadowy), bo style kaskadują — nakładają się na siebie według hierarchii priorytetów. Gdy kilka reguł dotyczy tego samego elementu, przeglądarka musi zdecydować, którą zastosować. Hierarchia (od najwyższego priorytetu):
- !important — nadpisuje wszystko (ale unikaj — to „nuclear option”)
- Inline style (atrybut
style="") - Identyfikator (
#id) — najwyższy priorytet wśród selektorów - Klasa (
.klasa), pseudo-klasa (:hover), atrybut ([type="text"]) - Tag (
h1,p,div) — najniższy priorytet - Dziedziczenie — elementy potomne dziedziczą niektóre style od rodziców (np.
color,font-family)
Przy tym samym priorytecie: wygrywa reguła, która jest później w kodzie (ostatnia deklaracja nadpisuje wcześniejsze).
Najważniejsze właściwości CSS — cheat sheet
Tekst
color— kolor tekstufont-size— rozmiar czcionki (px, em, rem, %)font-family— krój pisma (np.'Arial', sans-serif)font-weight— grubość (400 = normalna, 700 = bold)text-align— wyrównanie (left, center, right, justify)line-height— interlinia (1.5 = 150% rozmiaru czcionki)text-decoration— podkreślenie, przekreślenie (none, underline)
Box Model (model pudełkowy)
Każdy element HTML to pudełko z czterema warstwami:
content— treść (tekst, obrazek)padding— wewnętrzny margines (między treścią a ramką)border— ramkamargin— zewnętrzny margines (odległość od innych elementów)
.box {
padding: 20px;
border: 1px solid #ccc;
margin: 16px 0;
width: 300px;
}Tło
background-color— kolor tłabackground-image— obrazek w tlebackground-size— rozmiar (cover, contain, px)background-position— pozycja (center, top right)
Layout
display— typ wyświetlania (block, inline, flex, grid, none)position— pozycjonowanie (static, relative, absolute, fixed, sticky)flexbox— nowoczesny layout 1D (wiersz lub kolumna)grid— nowoczesny layout 2D (wiersze i kolumny jednocześnie)
Flexbox — najczęściej używany layout w 2026
Flexbox to system layoutu, który rozwiązuje 90% problemów z rozmieszczeniem elementów. Podstawowy przykład — wyśrodkowanie elementu w pionie i poziomie:
.container {
display: flex;
justify-content: center; /* środek w poziomie */
align-items: center; /* środek w pionie */
height: 100vh; /* pełna wysokość ekranu */
}Inne popularne zastosowania flexbox: nawigacja pozioma, karty produktów w rzędzie, footer z kolumnami, responsywne siatki. Nauka flexbox to najlepsza inwestycja czasu przy nauce CSS.
Responsive Design — strona na każdym ekranie
Responsive design oznacza, że strona dostosowuje się do rozmiaru ekranu — wygląda dobrze na telefonie (320px), tablecie (768px) i desktopie (1920px). Realizuje się to przez media queries:
/* Desktop (domyślny) */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* Tablet */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/* Telefon */
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
Na desktopie: 3 kolumny. Na tablecie: 2 kolumny. Na telefonie: 1 kolumna. Ta sama treść HTML, inny layout CSS — to jest responsive design.
CSS a WordPress — jak to działa
W WordPress CSS pochodzi z trzech źródeł:
- Motyw — główny plik
style.cssw katalogu motywu. Definiuje cały wygląd strony. - Customizer → Dodatkowy CSS — w wp-admin: Wygląd → Dostosuj → Dodatkowy CSS. Pole, w którym wpisujesz własne reguły CSS, które nadpisują style motywu. Idealne do drobnych poprawek bez edycji plików motywu.
- Wtyczki — każda wtyczka może dodawać własne pliki CSS (np. Elementor, WooCommerce, Contact Form 7).
Żeby zmienić wygląd elementu w WordPress bez edycji motywu: otwórz stronę → PPM → „Zbadaj element” (DevTools) → znajdź selektor CSS → wpisz nową regułę w „Dodatkowy CSS” w Customizerze.
Gdzie się uczyć CSS?
- MDN Web Docs (developer.mozilla.org/pl/docs/Web/CSS) — najlepsza dokumentacja. Oficjalna, aktualna, z przykładami.
- CSS-Tricks (css-tricks.com) — poradniki, snippety, przewodnik po Flexbox i Grid.
- freeCodeCamp (freecodecamp.org) — darmowy kurs interaktywny: HTML + CSS od zera do responsive design.
- Flexbox Froggy (flexboxfroggy.com) — gra ucząca Flexbox (przesuwasz żabki na kwiatki za pomocą CSS).
- Grid Garden (cssgridgarden.com) — gra ucząca CSS Grid (podlewasz ogródek).
- Kevin Powell (YouTube) — jeden z najlepszych nauczycieli CSS na YouTube. Practical, modern, no bullshit.
Najczęściej zadawane pytania
Czy CSS to język programowania?
Nie — CSS to język opisu stylu (stylesheet language). Nie ma zmiennych (w klasycznym sensie), pętli, warunków ani funkcji jak Python czy JavaScript. Ma custom properties (zmienne CSS: --primary-color: blue;) i calc(), ale to nie czyni go językiem programowania. CSS opisuje jak coś wygląda, nie co ma się wydarzyć.
Czy muszę znać CSS, żeby korzystać z WordPress?
Nie — motywy WordPress i page buildery (Elementor, Divi, Gutenberg) pozwalają budować strony wizualnie, bez kodu. Ale podstawowa znajomość CSS pozwala: dostosować drobne szczegóły (odległości, kolory, czcionki), naprawić problemy wizualne, zrozumieć dlaczego coś wygląda „nie tak” i nie być zależnym od motywu w 100%.
CSS3 — co to jest?
CSS3 to najnowsza wersja CSS (od ~2011), która dodała: Flexbox, Grid, animacje, przejścia (transitions), cienie (box-shadow, text-shadow), gradienty, media queries (responsive design), zmienne CSS, transformacje 2D/3D. Praktycznie cały nowoczesny CSS to CSS3. Numer „3″ w nazwie staje się archaiczny — dziś mówi się po prostu „CSS”.
SCSS / SASS / LESS — co to jest?
To preprocesory CSS — rozszerzenia języka CSS, które dodają: zmienne (przed CSS custom properties), zagnieżdżanie, mixiny, importy, funkcje. Pisanie SCSS jest wygodniejsze, ale przeglądarka nie rozumie SCSS — musisz go skompilować do CSS (narzędziem lub bundlerem). Dla początkujących: zacznij od czystego CSS, preprocesory są dla zaawansowanych.
Podsumowanie
CSS to język, który zamienia surowy HTML w wizualnie atrakcyjne strony. Składnia jest prosta: selektor + właściwość + wartość. Najważniejsze koncepty: Box Model (padding/border/margin), Flexbox (layout 1D), Grid (layout 2D), Media Queries (responsive). Nauka CSS nie wymaga żadnego oprogramowania — wystarczy edytor tekstu i przeglądarka z DevTools. Zacznij od Flexbox Froggy, zrób kurs na freeCodeCamp i eksperymentuj w DevTools — to najszybsza droga do biegłości.
