CSS

Cascading Style Sheets (CSS)
Autor	Håkon Wium Lie, Bert Bos
První verze	17. prosince 1996 (CSS 1)
Vydavatel	World Wide Web Consortium (W3C)
Logo
Název	Cascading Style Sheets (CSS)
Ovlivněn	DSSSL, XSL-FO
Paradigma	Deklarativní, založené na pravidlech
Standardy	W3C Recommendations
Přípona souboru	.css
Ovlivnil	Prakticky všechny moderní webové technologie

Rozbalit box

Obsah boxu

Cascading Style Sheets (zkratka CSS, česky kaskádové styly) je deklarativní stylovací jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných v HTML, XHTML, XML nebo jiných značkovacích jazycích. Společně s HTML a JavaScriptem tvoří základní trojici technologií pro tvorbu webových stránek a aplikací. Zatímco HTML definuje strukturu a sémantiku obsahu (nadpisy, odstavce, obrázky), CSS určuje, jak se tyto prvky zobrazí – jejich barvu, velikost, písmo, rozložení na stránce a mnoho dalších vizuálních vlastností.

Hlavní myšlenkou CSS je oddělení obsahu od jeho vizuální prezentace. Toto oddělení přináší řadu výhod, včetně snadnější údržby kódu, lepší přístupnosti, větší flexibility a možnosti definovat různý vzhled pro různá zařízení (např. pro monitory, tiskárny nebo mobilní telefony) pomocí jediného zdrojového HTML dokumentu. Standardy CSS jsou vyvíjeny a spravovány organizací World Wide Web Consortium (W3C).

📜 Historie

Vývoj CSS byl reakcí na problémy raného webu, kde byl vzhled stránek definován přímo v HTML pomocí značek jako `` nebo atributů jako `bgcolor`. Tento přístup vedl k nepřehlednému kódu, obtížné údržbě a zbytečně velkým souborům.

🏛️ Počátky a CSS 1

První návrh na stylovací jazyk pro web představil Håkon Wium Lie v roce 1994. Společně s Bertem Bosem vytvořili základ toho, co se později stalo CSS. První oficiální doporučení, CSS Level 1 (CSS1), bylo vydáno organizací W3C v prosinci 1996. Tato verze definovala základní vlastnosti pro formátování textu, barev, okrajů a pozicování. Podpora v tehdejších prohlížečích, jako byl Netscape Navigator a Internet Explorer, však byla velmi nekonzistentní a plná chyb.

🌐 CSS 2 a éra "válek prohlížečů"

V květnu 1998 bylo vydáno doporučení CSS Level 2 (CSS2), které přineslo řadu vylepšení, včetně absolutního, relativního a fixního pozicování, konceptu media types (pro tisk, obrazovky atd.) a pokročilejších selektorů. Kvůli nejasnostem ve specifikaci a pokračujícím "válkám prohlížečů" byla implementace stále problematická. Proto byla v roce 2011 vydána revidovaná verze CSS 2.1, která opravila chyby, vyjasnila sporné části a stala se stabilním základem, na kterém moderní web funguje.

🧩 Modulární přístup CSS3

Na rozdíl od předchozích verzí není CSS3 jedinou monolitickou specifikací. Místo toho je rozdělena do samostatných modulů, které mohou být vyvíjeny a finalizovány nezávisle na sobě. Tento přístup umožnil mnohem rychlejší inovace. Mezi nejdůležitější moduly CSS3 patří:

Selectors Level 3: Pokročilé selektory pro přesnější cílení na prvky.
Colors: Podpora pro RGBA, HSL a průhlednost.
Backgrounds and Borders: Možnost použití více obrázků na pozadí, zaoblené rohy (`border-radius`) a stíny (`box-shadow`).
2D/3D Transformations: Funkce pro otáčení, škálování a posouvání prvků.
Transitions: Plynulé animace změn vlastností.
Animations: Komplexní, klíčovými snímky řízené animace.
Flexible Box Layout (Flexbox): Modul pro efektivní jednorozměrné rozvržení prvků.
Grid Layout: Modul pro komplexní dvourozměrné rozvržení stránek.

🚀 Moderní CSS (Level 4 a dále)

Termín "CSS4" se oficiálně nepoužívá. Místo toho se mluví o nových úrovních jednotlivých modulů (např. Selectors Level 4). Moderní CSS přináší revoluční funkce, jako jsou:

Vlastní vlastnosti (CSS Custom Properties), známé jako CSS proměnné, které umožňují dynamické změny stylů.
Container Queries: Možnost stylovat prvky na základě velikosti jejich rodičovského kontejneru, nikoli jen celé stránky.
Cascade Layers (`@layer`): Nástroj pro lepší kontrolu nad specifičností a pořadím stylů ve velkých projektech.
Rozšířené barevné prostory jako P3 nebo Rec. 2020.

⚙️ Princip fungování

CSS funguje na základě sady pravidel. Každé pravidlo se skládá ze selektoru a bloku deklarací.

Syntaxe

Základní syntaxe CSS pravidla vypadá následovně: ```css selektor {

 vlastnost: hodnota;
 dalsi-vlastnost: jina-hodnota;

} ```

Selektor určuje, na který HTML prvek (nebo prvky) se bude pravidlo aplikovat.
Blok deklarací je uzavřen ve složených závorkách `{}`.
Deklarace se skládá z vlastnosti (např. `color`, `font-size`) a její hodnoty (např. `red`, `16px`), oddělených dvojtečkou. Jednotlivé deklarace jsou odděleny středníkem.

Příklad: Následující pravidlo nastaví všem odstavcům (`

`) na stránce modrou barvu textu a velikost písma 16 pixelů. ```css p { color: blue; font-size: 16px; } ```

Selektory

Selektory jsou klíčovou součástí CSS, protože umožňují přesně cílit na prvky, které chceme stylovat.

Typové selektory: Cílí na všechny prvky daného typu (např. `h1`, `div`, `p`).
Třídní selektory (Class): Cílí na prvky s daným atributem `class` (např. `.upozorneni`). Jeden prvek může mít více tříd.
ID selektory: Cílí na prvek s unikátním atributem `id` (např. `#hlavni-menu`). ID by mělo být na stránce jedinečné.
Atributové selektory: Cílí na prvky na základě jejich atributů a hodnot (např. `input[type="text"]`).
Pseudotřídy: Cílí na prvky v určitém stavu (např. `:hover` při najetí myší, `:first-child` pro první dítě).
Pseudoelementy: Umožňují stylovat části prvku, které nejsou definovány v HTML (např. `::before` pro vložení obsahu před prvek, `::first-letter` pro první písmeno).

Kaskáda, specifičnost a dědičnost

Název "kaskádové styly" odkazuje na mechanismus, kterým prohlížeč rozhoduje, které stylové pravidlo se aplikuje, pokud na jeden prvek cílí více pravidel.

1. Pořadí a původ (Cascade): Styly mohou pocházet z různých zdrojů – od autora stránky, od uživatele (v nastavení prohlížeče) nebo z výchozího nastavení prohlížeče. Pravidla autora mají obecně přednost před pravidly uživatele a ta zase před výchozími. Pokud jsou pravidla ze stejného zdroje, poslední definované pravidlo vyhrává. 2. Specifičnost (Specificity): Každý selektor má svou "váhu" neboli specifičnost. Čím je selektor specifičtější, tím vyšší má prioritu. Obecně platí: ID selektor (`#id`) je silnější než třídní selektor (`.class`), který je silnější než typový selektor (`p`). 3. Důležitost (`!important`): Přidáním `!important` k deklaraci lze přebít jakékoli jiné pravidlo, bez ohledu na jeho specifičnost nebo pořadí. Jeho používání by mělo být omezeno na specifické případy, protože narušuje přirozenou kaskádu. 4. Dědičnost (Inheritance): Některé CSS vlastnosti (např. `color`, `font-family`, `text-align`) se automaticky přenášejí z rodičovského prvku na jeho potomky. Například pokud nastavíte barvu textu na prvku `<body>`, všechny odstavce a nadpisy uvnitř zdědí tuto barvu, pokud nemají definovanou vlastní.

Box Model

Každý prvek na webové stránce je v CSS chápán jako obdélníkový box. Tento tzv. box model se skládá ze čtyř částí:

Content: Vlastní obsah prvku (text, obrázek).
Padding: Vnitřní okraj, prostor mezi obsahem a rámečkem.
Border: Rámeček, který obklopuje padding a obsah.
Margin: Vnější okraj, prostor mezi rámečkem a okolními prvky.

Standardně se šířka a výška prvku (`width`, `height`) vztahují pouze na oblast obsahu. Pomocí vlastnosti `box-sizing: border-box;` lze toto chování změnit tak, aby `width` a `height` zahrnovaly i padding a border, což často zjednodušuje tvorbu rozvržení.

🛠️ Metodologie a preprocesory

S rostoucí složitostí webových projektů vznikla potřeba organizovat CSS kód systematicky.

Metodologie

Metodologie jsou soubory pravidel a doporučení, jak psát udržitelný a škálovatelný CSS kód.

BEM (Block, Element, Modifier): Velmi populární metodologie, která pojmenovává třídy podle struktury `blok__element--modifikator` (např. `.card__title--highlighted`). Zabraňuje konfliktům a zpřehledňuje strukturu komponent.
OOCSS (Object-Oriented CSS): Zaměřuje se na oddělení struktury od vzhledu a kontejneru od obsahu, čímž podporuje znovupoužitelnost stylů.
SMACSS (Scalable and Modular Architecture for CSS): Dělí styly do kategorií (Base, Layout, Module, State, Theme) pro lepší organizaci.

Preprocesory

CSS preprocesory jsou nástroje, které rozšiřují syntaxi CSS o programátorské konstrukce. Kód napsaný v preprocesoru se před použitím na webu "přeloží" (zkompiluje) do standardního CSS.

Sass (Syntactically Awesome Style Sheets): Nejrozšířenější preprocesor. Umožňuje používat proměnné, vnořená pravidla, mixiny (funkce pro opakované použití bloků stylů) a mnoho dalšího.
Less (Leaner Style Sheets): Podobný jako Sass, byl populární zejména v ekosystému frameworku Bootstrap.
Stylus: Nabízí velmi flexibilní syntaxi, která umožňuje vynechat složené závorky, dvojtečky i středníky.

💡 Pro laiky

Představte si webovou stránku jako stavbu domu.

HTML je hrubá stavba: Jsou to základy, nosné zdi, střecha, příčky a otvory pro okna a dveře. HTML říká: "Tady bude obývací pokoj, tady kuchyň, toto je nadpis a toto je odstavec textu." Definuje tedy strukturu a smysl jednotlivých částí.
CSS jsou interiérový designér a fasáda: CSS vezme tuto hrubou stavbu a určí, jak bude vypadat. Říká: "Zdi v obýváku budou světle modré, podlaha bude dřevěná, písmo nadpisů bude velké a tučné a okna budou mít červené rámy." CSS tedy definuje veškerý vzhled – barvy, materiály, rozestupy, velikosti a celkovou atmosféru.

Díky oddělení HTML a CSS můžete kompletně změnit vzhled "domu" (např. z letního sídla na zimní chatu), aniž byste museli pohnout jedinou "zdí" (měnit HTML kód). Stačí jen vyměnit "designový plán" (CSS soubor).

⚖️ Výhody a nevýhody

Výhody

Oddělení struktury a vzhledu: Zvyšuje přehlednost a usnadňuje údržbu kódu.
Znovupoužitelnost: Styly definované v jednom souboru lze aplikovat na stovky stránek.
Konzistence: Zajišťuje jednotný vzhled napříč celým webem.
Přístupnost: Správně strukturovaný dokument bez vizuálních značek je lépe čitelný pro asistenční technologie (např. čtečky obrazovky).
Responzivní design: Umožňuje snadno přizpůsobit vzhled pro různá zařízení (mobily, tablety, desktopy).
Pokročilé možnosti designu: Moderní CSS umožňuje komplexní rozvržení, animace a vizuální efekty, které byly dříve možné jen s obrázky nebo JavaScriptem.

Nevýhody

Složitost pro začátečníky: Pochopení kaskády, specifičnosti a dědičnosti může být náročné.
Kompatibilita prohlížečů: Ačkoliv se situace výrazně zlepšila, stále existují drobné rozdíly v implementaci nových vlastností mezi prohlížeči.
Globální rozsah: Všechny styly standardně platí pro celou stránku, což může ve velkých aplikacích vést ke konfliktům a nechtěnému přepisování stylů. Tento problém řeší metodologie jako BEM nebo moderní JavaScript frameworky.
Není to programovací jazyk: CSS je deklarativní jazyk, chybí mu logické konstrukce jako podmínky nebo cykly (tyto funkce dodávají preprocesory).

🎬 Video

⏰ Tento článek je aktuální k datu 18.12.2025