Co je CSS? CSS jsou kaskádové styly, tedy jazyk, kterým se webové stránce nastavuje vzhled. Zkratka pochází z anglického Cascading Style Sheets. Zatímco HTML říká, co na stránce je (nadpis, odstavec, obrázek, tlačítko), CSS říká, jak to má vypadat: jakou barvu má text, jak velké je písmo, kolik místa je kolem obrázku nebo kde přesně se menu zobrazí.

Představte si dopis. HTML je samotný text dopisu a jeho členění na nadpis a odstavce. CSS je papír, na kterém je vytištěný, zvolené písmo, okraje a barva inkoustu. Stejný text můžete vytisknout stokrát různě a pokaždé bude působit jinak, aniž byste změnili jediné slovo. Přesně tohle dělá CSS s webem.

Pravidlo v CSS vypadá jednoduše: nejdřív se řekne, čeho se týká, a pak se vyjmenují vlastnosti. Například pravidlo pro všechny hlavní nadpisy může nastavit modrou barvu a tučné písmo. Tato pravidla se obvykle ukládají do samostatného souboru s příponou .css, který si prohlížeč stáhne spolu se stránkou.

Proč se stylům říká kaskádové? Protože pravidel bývá na webu více a mohou si odporovat. Server ani prohlížeč nehádají: mají pevné pořadí, podle kterého rozhodnou, které pravidlo vyhraje. Zjednodušeně platí, že konkrétnější pokyn přebije obecný a pozdější přebije dřívější. Je to podobné jako v práci, kde pokyn přímého nadřízeného ke konkrétnímu úkolu má přednost před obecnou směrnicí.

K čemu je CSS dobré prakticky? Hlavně ke třem věcem:

  • Jednotný vzhled celého webu – barvu tlačítek změníte na jednom místě a projeví se to na všech stránkách najednou.
  • Přizpůsobení mobilům – pomocí CSS se stránka na úzké obrazovce přeskládá do jednoho sloupce, což je základ responzivního designu. Souvisí s tím i nastavení viewportu.
  • Rychlost webu – jeden soubor se styly si prohlížeč uloží do mezipaměti a při dalších stránkách ho už nestahuje znovu.

Musíte umět CSS, abyste měli web? Nemusíte. Pokud používáte WordPress nebo jiný redakční systém, vzhled za Vás řeší šablona, která už hotové styly obsahuje. Znalost základů se ale hodí, když chcete drobnost doladit, třeba zvětšit písmo nebo změnit odstín barvy. Mnoho webů také staví na hotových sadách stylů, jako je Bootstrap.

Na co si dát pozor? Pokud upravíte soubor se styly a v prohlížeči se nic nezmění, skoro vždy za to může mezipaměť, která drží starší verzi. Pomůže obnovení stránky s vyprázdněním mezipaměti. Druhá častá potíž je hromadění nepoužívaných stylů z vypnutých doplňků; zbytečně velké soubory web zpomalují, jak popisuje heslo optimalizace webu. Soubory se styly nahrajete přes FTP nebo správcem souborů v klientské zóně u kteréhokoliv našeho webhostingu.