Na této stránce pomocí CSS

stylujeme naše `` nadpisy
(dále navrhuju číst há dvojky) a odstavce tak,

že všechny `` jsou zelené
a všechny odstavce jsou fialové.

Ale co kdybychom chtěli vybrat
jen první `` nadpis

nebo nastylovat
jen druhý odstavec?

Musíme najít způsob,
jak prohlížeči říct,

které z elementů chceme vybrat,

aby se styly nepoužily všude,
jako doposud.

Prvním způsobem je výběr pomocí identifikátoru, neboli ID.

Můžeme libovolnému tagu na naší
stránce přiřadit jedinečné ID

a potom můžeme CSS říct,

"Poslouchej: Chceme použít tyto styly
jen pro element s tímto ID,

pro žádné jiné ne."

Abychom toho dosáhli, musíme
nejprve upravit HTML kód

a přidat naše atributy id k tagům,
které chceme vybrat.

Začneme tady s druhým odstavcem.

Pro přidání atributu id
posuneme náš kurzor

na začátek tagu ``
hned za p,

přidáme jednu mezeru
a za ní `id = "`

Teď musíme vyplnit náš atribut id
nějakou hodnotou.

Jaké ID mu mám dát?

No, mělo by být popisné
a jedinečné.

Nic na této stránce nesmí mít stejné ID.

Protože naše písnička je o králících,
id by mohlo být 'rabbits-song'.

V atributu ID nemůžou být mezery,
a pokud máme více slov,

musíme je oddělit pomlčkami
nebo podtržítky.

Já osobně mám nejradši pomlčky.

Teď už umíme jednoznačně vybrat
tento odstavec.

Takže můžeme přidat CSS
pravidlo přímo pro něj.

V druhém kroku se tedy vraťme 
zpět k našemu tagu ``.

Pod poslední pravidlo přidáme nový řádek.

Nezapomeňte, první část CSS pravidla
je vždy selektor:

ta část, která říká prohlížeči,
co přesně vybrat.

V našich předchozích pravidlech jsme
používali selektory jako 'h2' a 'p'

a tím jsme zvolili všechny tagy
`` a `` na stránce.

Teď když chceme selektor,
který vybere pouze elementy s určitým ID,

náš selektor musí začínat křížkem.

Tím prohlížeči řekneme,
že cokoliv za křížkem je ID.

Teď napíšeme naše ID:
rabbits-song.

Zbytek pravidla bude stejný jako doteď.

Otevřeme a zavřeme naše složené závorky,

přidáme vlastnost,
třeba background-color...

... a ta-dá! Zabralo to!

Žlutou barvu má jen odstavec s písničkou,

první odstavec se nezměnil.

Pojďme si to zopakovat,
ale vybereme náš první tag ``.

Pamatujete si první krok?

Správně. Nejdřív musíme upravit naše HTML

a přidat atribut `id`.

Takže náš kurzor hezky
do otevíracího tagu,

přidat mezeru, napsat `id=`

a potom opět zcela
jedinečné a popisné ID.

Třeba, "rabbits-info-heading".

Super, teď druhý krok.
Zpět do našeho tagu 'style',

přidáme nový řádek,
napíšeme křížek,

potom naše ID,
rabbits-info-heading

a pak vložíme naše vlastnosti
do složených závorek

background-color: purple;

O-ou! Aha, něco se pokazilo.
Hmm... vidíte, kde je chyba?

Napsala jsem to správně?

rabbits-info-Heading,
rabbits-info-heading...

Hmm... vypadají docela stejně.

Můžu je projít písmeno po písmenu

a zkusit najít chybu,

ale já radši sjedu dolů,
označím si naše ID z HTML

a zkopíruju si ho, a potom ho vložím sem
nahoru, ať mám jistotu, že jsou přesně stejné.

A... zabralo to!

Moje h2 má nové pozadí.
A všimli jste si, co se změnilo?

Možná že jo. Bylo to tohle h.
Předtím jsme použili velké H,

a prohlížeč mezi velikostmi rozlišuje.

Musí to být malé h, aby to bylo stejné
jako v HTML kódu,

protože v atributu ID záleží
na velikosti písmen.

Takže je musíme napsat všude
přesně stejnou velikostí.

Já nejradši používám pro moje IDčka
pouze malá písmena,

protože pak nemusím přemýšlet,
jakou velikost jsem kde použila.

Dobře, na závěr poslední upozornění:

IDčka musí být jedinečná!

Pokud máte na stránce dva tagy
s přesně stejným IDčkem,

prohlížeč může nastylovat oba,
ale taky může nastylovat jen jeden z nich.

A to určitě nechceme ponechat náhodě.

Takže chceme pěkná, jedinečná a popisná IDčka.