V ranných dobách webu se nevyskytovaly žádné vizuální elementy, pouze čistý text, ale s vývojem webových browserů se staly stránky plné grafických prvků běžné.
A právě proto vzniklo CSS, aby oddělilo obsah (HTML) od vzhledu webové stránky.
Pomocí CSS můžete označit různé elementy na HTML stránce a přiřadit jim různé vzhledové vlastnosti.
Tento návod byl napsán pro CSS 2, avšak CSS 3 se stalo velmi oblíbené a v dnešní době už běžné.
**POZNÁMKA** Protože CSS produkuje vizuální výsledky, je nutné k jeho naučení všechno zkoušet třeba na [dabbletu](http://dabblet.com/).
Tento článek se zaměřuje hlavně na syntaxi a poskytue také pár obecných tipů.
```css
/* komentáře jsou ohraničeny lomítkem s hvězdičkou, přesně jako tyto dva
řádky, v CSS není nic jako jednořádkový komentář, pouze tenhle zápis */
/* ################
## SELEKTORY
################ */
/* Selektor se používá pro vybrání elementu na stránce:
selektor { vlastnost: hodnota; /* více vlastností... }*/
/*
Toto je náš element:
<divtrida='trida1 trida2'id='nejakeID'attr='hodnota'otherAttr='cs-cz co neco'/>
*/
/* Můžeme vybrat tento element třeba podle jeho třídy */
.trida1 { }
/* nebo obou tříd! */
.trida1.trida2 { }
/* nebo jeho jména */
div { }
/* nebo jeho id */
#nejakeID { }
/* nebo podle toho, že má atribut! */
[attr] { font-size:smaller; }
/* nebo že argument nabývá specifické hodnoty*/
[attr='hodnota'] { font-size:smaller; }
/* začíná nějakou hodnotou (CSS 3) */
[attr^='ho'] { font-size:smaller; }
/* nebo končí něčím (CSS 3) */
[attr$='ta'] { font-size:smaller; }
/* nebo obsahuje nějakou hodnotu, která je v atributu oddělená mezerami */
[otherAttr~='co'] { }
[otherAttr~='neco'] { }
/* nebo obsahuje hodnotu oddělenou pomlčkou - "-" (U+002D) */
[otherAttr|='cs'] { font-size:smaller; }
/* Můžeme spojit různé selektory, abychom získali specifičtější selektor.
Pozor, nedávejte mezi ně mezery! */
div.nejaka-trida[attr$='ta'] { }
/* Můžeme vybrat element, který je potomek jineho */
div.vnejsi-element > .jmeno-tridy { }
/* nebo zanořen ještě hlouběji. Potomci jsou přímo pod vnější třídou, pouze 1
úroveň pod rodičem. Tento selektor bude fungovat na jakékoliv úrovni pod
rodičem */
div.rodic .jmeno-tridy { }
/* Varování: stejný selektor bez mezery má úplně jiný význam
Vzpomínáte si jaký? */
div.rodic.jmeno-tridy { }
/* Možná budete chtít vybrat element, který leží přímo vedle */
.jsem-primo-pred + .timto-elementem { }
/* nebo kdekoliv na stejné úrovni stromu */
.jsem-kdekoliv-pred ~ .timto-elementem { }
/* Existují selektory nazvané pseudo třídy, kterými můžeme vybrat elementy,
když jsou v určitém stavu */
/* na příklad, když kurzor najede na element */
selektor:hover { }
/* nebo již navštívený odkaz */
selektor:visited { }
/* nebo nebyl navštíven */
selektor:link { }
/* nebo když je vybrán, např kliknutím do inputu*/
selektor:focus { }
/* element, ktery je prvni potomek rodiče */
selektor:first-child {}
/* element, který je poslední potomek rodiče */
selektor:last-child {}
/* Stejně jako pseudo třídy, umožňují pseudo elementy stylizovat určité
části dokumentu */
/* odpovídá virtuálnímu prvnímu potomku */
selektor::before {}
/* odpovídá virtuálnímu poslednímu potomku */
selektor::after {}
/* Na vhodném místě, může být použitá hvězdička jako žolík, který vybere každý element */
* { } /* všechny elementy */
.rodic * { } /* všechny vnořené elementy */
.rodic > * { } /* všichni potomci */
/* ####################
## VLASTNOSTI
#################### */
selektor {
/* Jednotky délky můžou být relativní nebo absolutní */
/* Relativní jednotky */
width: 50%; /* počet procent šířky rodičovského elementu */
font-size: 2em; /* násobek puvodní velikosti fontu elementu */
Element může být vybrán více selektory a jeho vlastnosti můžou být nastaveny více než jednou. V těchto případech, má jedno zadání vlastnosti prioritu před druhým. Obecně platí, že více specifické selektory mají přednost před těmi méně specifickými.
Tento proces se nazývá kaskáda, proto i název kaskádové styly(Cascading Style Sheets).
Priorita stylu je následující. Pamatujte, priorita pro každou **vlastnost**, ne pro celý blok.
*`E` má nejvyšší prioritu kvůli slůvku `!important`. Je doporučováno se úplně vyhnout jeho použití.
*`F` je další, kvůli stylu zadanému přimo do elementu
*`A` je další, protože je více specifické, než cokoliv dalšího. Má 3 selektory: jméno elementu `p`, jeho třídu `trida1`, atribut `attr='hodnota'`.
*`C` je další, i když je stejně specifický jako `B`, protože je uveden až po něm.
*`B` je další
*`D` je poslední
## Kompatibilita
Většina z možností v CSS 2 (a spousta v CSS 3) je dostupná napříč všemi browsery a zařízeními. Ale pořád je dobrá praxe, zkontrolovat dostupnost, před užitím nové vlastnosti/fičury.
