Co je CSS a jak se připojuje

00:00:00

HTML ti dalo strukturu – víš, co je nadpis, odstavec nebo seznam. Ale všechno vypadá dost nudně: černý text na bílém pozadí, výchozí písmo prohlížeče, žádné rozložení. Tady nastupuje CSS. Je to jazyk, díky němuž může tvůj web vypadat přesně tak, jak chceš.

Co je CSS?

CSS je zkratka z anglického Cascading Style Sheets – česky kaskádové styly. Je to jazyk, který říká prohlížeči, jak má HTML vypadat: jaké barvy použít, jak velké má být písmo, jak rozmístit prvky na stránce.

Zatímco HTML odpovídá na otázku „co je to?", CSS odpovídá na otázku „jak to vypadá?". Jsou to dva oddělené jazyky se dvěma různými úkoly – a to je dobře. Díky tomu můžeš změnit celý vzhled webu, aniž bys sáhl do jediného HTML souboru.

Jak CSS funguje?

CSS pravidlo se skládá ze dvou částí:

Selektor – říká, na který HTML prvek pravidlo platí (například všechny odstavce, nebo prvek s konkrétní třídou).
Deklarace – říká, co se změní (vlastnost a její hodnota, například barva textu nebo velikost písma).

Základní zápis vypadá takto:

p {
  color: #333333;
  font-size: 1rem;
}

Tento kód říká: „Všechny odstavce (p) zobraz tmavě šedou barvou (#333333) a velikostí písma 1rem."

Jak připojit CSS k HTML?

Existují tři způsoby, jak přidat CSS ke stránce. Každý se hodí pro jiný účel.

1. Externí soubor (doporučená metoda)

CSS napíšeš do samostatného souboru s příponou .css a v HTML ho připojíš v sekci <head> pomocí tagu <link>:

<link rel="stylesheet" href="styl.css">

Tato metoda je nejlepší pro reálné weby. Jeden CSS soubor řídí vzhled všech stránek najednou – změníš barvu na jednom místě a změní se všude.

2. Interní styl (v sekci head)

CSS napíšeš přímo do HTML souboru, do bloku <style> v sekci <head>:

<style>
  p {
    color: navy;
  }
</style>

Hodí se pro rychlé prototypy nebo jednostránkové soubory. Nevhodné pro větší weby – každá stránka má styly zvlášť.

3. Inline styl (přímo v tagu)

CSS napíšeš přímo do atributu style konkrétního HTML prvku:

<p style="color: red;">Tento odstavec bude červený.</p>

Inline styly se téměř nikdy nedoporučují – jsou špatně udržovatelné, nepřehledné a obtížně přepisovatelné. Existují situace, kdy jsou nutné (například dynamické styly generované JavaScriptem), ale ve statickém HTML se jim vyhni.

Co znamená „kaskáda"?

Písmeno C v CSS znamená Cascading – kaskádový. To je důležitý koncept: pokud na stejný prvek platí více pravidel, CSS rozhodne, které z nich vyhraje, podle přesně definovaných priorit:

Inline styly mají nejvyšší prioritu.
Pravidla s vyšší specificitou (například .btn) přebijí obecnější pravidla (a).
Pokud mají dvě pravidla stejnou specificitu, vyhraje to, které je v souboru níže.

Kaskádu nemusíš hned plně chápat – pochopíš ji časem praxí. Zatím stačí vědět, že konflikty mezi pravidly CSS řeší automaticky.

Dědičnost CSS

Mnoho CSS vlastností se dědí – tedy automaticky přenáší z rodičovského prvku na jeho potomky. Pokud nastavíš barvu textu a velikost písma na tagu <body>, zdědí je všechny prvky uvnitř, aniž bys musel pravidlo opakovat:

body {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #222222;
}

Nastavení platí pro všechny odstavce, nadpisy, seznamy i jiné prvky uvnitř <body> – pokud jim nenastavíš vlastní hodnotu, která ho přepíše.

Ne všechny vlastnosti se dědí. Například border, margin, padding nebo background-color se nedědí – každý prvek si je musí nastavit sám. Vlastnosti, které se dědí, jsou hlavně ty související s textem: color, font-family, font-size, line-height, text-align.

Tip od Zdeňka

Zdeněk radí: Na tomto webu používám jediný sdílený CSS soubor master_26.css pro všechny stránky najednou. Když potřebuji změnit například barvu odkazů nebo velikost písma, stačí mi upravit jeden soubor – a změna se projeví okamžitě na celém webu. To je síla externích stylů. Začni s nimi od prvního projektu a ušetříš si spoustu práce.