CSS (Cascading Style Sheets) se využívají k formátování obsahu HTML, XHTML a XML dokumentů.

---

Forma x obsah

Dnešním trendem tvorby webů je striktní oddělení formy od obsahu. Zjednodušeně řečeno o obsah se stará HTML a o vzhled (formu) CSS soubor.

Soubor s příponou css tedy zajišťuje vzhled. Je s HTML souborem/soubory propojen (někdy je CSS psáno přímo do HTML souboru) a oba jsou pak nabídnuty prohlížeči, aby se s nimi nějak vyrovnal a vykreslil je.

CSS soubor také vytváříme ve stejném editoru jako HTML soubor, avšak sám o sobě nemá význam, musí být spojen právě s ním. Aneb HTML soubor může sám o sobě existovat a být plně funkční, CSS soubor však ne.

Nabízejí prakticky neomezené možnosti formátování a samotná údržba webových stránek je velice jednoduchá.

Možnosti formátování textu

Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Dnes máme dva různé způsoby jak fomátovat:

• Pomocí HTML značek (například kurzíva ), které se dnes již považují za zastaralé. V kódu moderního webu tyto značky již určitě nenajdete, protože pomocí nich prostě některé věci neuděláme.
• Kaskádovými styly, které jsou sice trochu složitější, ale nabízejí velmi široké spektrum možností.

Kaskádové styly tedy vlastně slouží k formátování obsahu HTML. Formátováním máme na mysli třeba barvu a velikost písma, pozadí, zarovnání, formátování nadpisu atd.

Co získáte

Pokud místo tabulek použijete CSS styly:

• Můžete opět vyrábět strukturované dokumenty. Použitím CSS oddělíte obsah stránky (HTML) od jejího vzhledu (CSS); stránky budou dobře čitelné ve starých a neobvyklých prohlížečích, budou dobře strojově (a nejen strojově) zpracovatelné.
• Získáte přehledný a jednoduchý kód stránky.
• Díky oddělení formy od obsahu bude velmi snadné kompletně změnit vzhled celého webu pouhou změnou v CSS.
• Výrazně zmenšíte datovou velikost stránky; použitím CSS (zvláště pak v externím souboru) může klesnout objem přenášených dat i výrazně pod 50%.
• Stránky se budou načítat rychleji – prohlížeče nemusí čekat, až se načte celá uzavírací tabulka, ale vykresluje objekty tak, jak se načítají; pořadí a způsob zobrazování můžete navíc významně ovlivnit sami.
• Pokud si najdete postupy, které dostatečně fungují i v rádoby-CSS-prohlížečích, prakticky nemusíte stránky ladit v mnoha různých klientech na různých platformách.

Proč vzniklo

Základním důvodem je především omezená formátovací schopnost HTML. Nastavit u textu font, velikost, řez a barvu je opravdu málo a s některými objekty neuděláte pomocí html vůbec nic.

CSS umožní upravovat každý prvek na webu, cokoliv může získat rámeček, barvu pozadí, texturu či speciální umístění vůči zbytku stránky.

Ke vzniku CSS napomohl také trend oddělovat od sebe obsahovou a designovou složku webu. Pokud píšete dokument v čistém HTML, musíte psát formátování rovnou do textu. To vede k nepřehlednosti kódu a zpětná úprava vzhledu je pracná ne-li nemožná.

Naopak pokud využijete styly, tak se HTML kód omezí pouze na rozložení stránky ve smyslu: toto je hlavní nadpis, toto je podnadpis, toto je normální odstavec, tento text je důležitý, toto je postranní lišta.

K takovému dokumentu pak připojíte externí soubor se styly, který určí, jak má vypadat hlavní nadpis, podnadpis, normální text a že postranní pruh se zobrazí jako postranní. Změny ve vzhledu se pak provádí pouze úpravou CSS souboru, do HTML kódu se vůbec nemusí sahat.

Nevýhody

CSS má ovšem taky určité nevýhody. Tou základní je podpora prohlížečů. Tedy nejčastější prohlížeče jako Firefox, MSIE nebo Opera všechny základní parametry podporují (kromě těch amatérských jako je třeba blink), ovšem problém spočívá v tom, jak! Každý totiž reaguje na danou vlastnost kapánek jinak a v celkovém designu se to nakonec projeví docela razantně.

Příklad: pokud vytvoříte odstavec 100*100px a přiřadíte mu rámeček tlustý 1px, v IE bude rámeček součást plochy, tedy rozměry budou pořád stejné, ale ve Firefoxu se rámeček jakoby nabalí na ten čtverec a ten má potom rozměry 102 * 102. Záleží také na verzi uvedených prohlížečů, takže vám se to třeba nestane, mně to ovšem udělalo dost problémů.