CSS: základy (kaskádové styly)

Kaskádové styly (CSS) umožňují určit vzhled jednotlivých prvků HTML stránky (či jiného XML dokumentu). Popis vzhledu a grafického rozložení dokumentu je tak do určité míry oddělen od obsahu, podobu určitých částí dokumentu lze snadno a hromadně měnit. Pomocí CSS lze také zajistit responzivní design: dokument může vypadat odlišně např. při různých rozměrech obrazovky.

CSS může být zapsáno v odděleném souboru (s příponou .css), na který se odkazuje z hlavičky HTML souboru. V takovém případě se jedná o tzv. externí CSS. Kaskádový styl též může být obsažen v tagu <style> v hlavičce HTML (interní CSS) či přímo u jednotlivých tagů v dokumentu (např. <p style="color: green">Hello world!</p> – inline CSS).

Externí či interní CSS se skládá z určitých pravidel. Pravidlo obsahuje tzv. selektor (popisuje, který prvek bude pravidlem ovlivněný) a jednotlivé deklarace oddělené středníky, společně uzavřené ve složených závorkách. Deklarace vždy sestává z identifikátoru vlastnosti (např. font-size), dvojtečky a hodnoty (např. 12pt).

Selektory mohou ovlivňovat konkrétní html tag, v takovém případě sestávají pouze z písmen a číslic:

h2 {color: ochre} – Nadpisy 2. úrovně budou okrové.

Pokud mají deklarace platit pro více prvků zároveň, selektory se oddělují čárkou:

h2, h3 {color: ochre} – Nadpisy 2. a 3. úrovně budou okrové.

Má-li selektor ovlivňovat jen prvky s určitou třídou, píše se na jeho začátek tečka:

.btn-skyblue {background: skyblue; border-radius: 2rem} – Prvky s class="btn-skyblue" budou mít modré pozadí a zaoblené rohy.

Prvek se určitým identifikátorem (id) se předznamenává znakem # (např. #price-selector).

Je-li mezi selektory mezera, ovlivňujeme jimi druhý uvedený prvek uzavřený v prvním uvedeném:

.gallery img {width: 130px; height: 130px} – Ovlivní obrázky v prvku se třídou gallery.

V případě selektorů oddělených plusem se předpis týká druhého uvedeného prvku, který následuje za prvním uvedeným:

h1 + p {font-size: 13pt} – Ovlivní odstavce (<p>) následující po nadpisech první úrovně (<h1>).

Pomocí dvojtečky v selektoru se vyjadřuje určitý stav prvku, např a:hover ovlivní odkazy, pokud je nad nimi kurzor.

Jeden prvek může být ovlivněn více pravidly. Mějme CSS:

p {font-size: 12pt}

.text-navy {color: blue}

Odstavec <p class="text-navy">Hello world!</p> tak bude mít písmo velké 12 bodů i modrou barvu.