Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

Začátky s CSS

Úvod k stylování stránek
Zpět na Tutoriály Následující

#1 Co je CSS

CSS, anglicky Cascading Style Sheets, česky kaskádové styly je značkovací jazyk, který doplňuje HTML. Určuje, jak se má, který prvek zobrazit, jakou má mít barvu, velikost a podobně.

Tip: CSS dokáže šetřit také čas při vytváření webových stránek, jelikož lze stejný soubor aplikovat na různé stránky.

#2 Historie

Kaskádové styly vyřešily problém s HTML jazykem, který nikdy nebyl určen k velkému stylování a formátování stránky. HTML slouží pouze jako struktura stránky, kterou CSS doplňuje styly.

Původně se stylování začalo přidávat do HTML v podobě prvků, ale když začínaly být kódy extrémně dlouhé a nečitelné, rozhodlo se sdružení W3C (World Wide Web Consortium) vytvořit CSS.

#3 Jak funguje

CSS je ve svém základu seznam vlastností prvků HTML. Má přes dvě stovky vlastností, které společně dokáží přetvořit obyčejný HTML prvek na designově pěkný prvek. Syntax CSS vypadá takto:

body {
 background-color: gray;
 color: white;
}
h1 {
 color: yellow;
}

Prvně se definuje prvek, který chceme stylovat. Následují složené závorky, do nichž se vkládají vlastnosti. V tomto příkladu je definováno, že tělo stránky bude mít šedé pozadí, jakýkoli text na něm bílou barvu, kromě nadpisu první úrovně, který má definovanou barvu žlutou.

Již na tomto příkladu je vidět, proč má CSS v sobě slovo kaskádové – i když je tělu pro text definována bíla barva, jelikož je nadpis první úrovně specifikován pod touto definicí, daná definice se pro daný prvek mění, v tomto případě na barvu žlutou.

Tip: Jestli si potřebujete procvičit strukturu a rozložení stránky, navštivte náš HTML tutoriál.