Podívejme se na naší webovou stránku.

Máme tu tyto hlavní nadpisy,

odstavec popisující králíky

a dále tu je několik odstavců,

s textem mé oblíbené písničky o králících.

Posledně jsme stylovali první
odstavec pomocí identifikátoru.

Ale teď máme odstavců víc

a chci je mít všechny se žlutým pozadím.

Jak bychom to mohli udělat
pomocí toho, co už známe?

Nejprve jsme se naučili,

jak vybrat všechny tagy určitého typu,

například pomocí selektoru 'p'.

Ale tím bychom obarvili všechny
odstavce, ne jen ty s písničkou.

Potřebujeme něco konkrétnějšího.

Potom jsme se naučili jak vybírat
tagy pomocí jejich vlastního ID,

jako když jsme vybrali odstavec
s identifikátorem "rabbit-song".

Ale tím jsme zase vybrali
jenom první odstavec.

A to IDčko už nemůžeme
přidat k ostatním odstavcům,

protože nemůžeme použít
jedno stejné ID u různých tagů.

Kdybychom chtěli vybrat
i ty ostatní odstavce,

museli bychom každému
z nich dát nové IDčko,

(například "song-lyrics2"
a "song-lyrics3"),

protože každé ID
musí být jedinečné.

A pak bychom pro každý z nich
museli přidat pravidla.

To by šlo, ale fíha,
to je strašně moc práce.

A u každé nové sloky písničky,

bychom nesměli zapomenout
na přidání dalšího IDčka do HTML

a dalšího ID do CSS pravidel,

a kdybychom chtěli přidat sto
slok, tak pojdeme únavou.

Ale, hádejte co?

Existuje lepší způsob. Říkáme mu "třídy".

Třída je v podstatě způsob,

kterým můžeme přidat
libovolný element do nějaké skupiny.

A do této skupiny můžeme přidat
libovolný počet elementů.

Třídu přidáme podobně jako ID,
potřebujeme atribut "class".

Takže nejprve ještě smažu to IDčko,
protože ho nahradíme.

Teď mám kurzor na začátku tagu .

Přidáme mezeru a napíšeme:
class rovná se uvozovky

Teď musíme vymyslet,
jak se třída bude jmenovat.

Hezké popisné jméno.

Nazveme ji "song-lyrics",

tedy česky "text-písně".

Jaké další elementy by
měly mít tuto třídu?

No, přece všechny ostatní
odstavce s textem písničky.

Takže musíme jít dolů

a přidat stejný atribut
ke všem odstavcům.

Tak, super.
Teď už můžeme přidat CSS pravidlo.

Půjdeme zpátky nahoru do tagu

a smažeme náš ID selektor z minula,
protože ho už nebudeme potřebovat.

A teď musíme vytvořit
selektor pro naši třídu.

Selektor třídy vždycky začíná tečkou.

Hned za ní napíšeme jméno třídy:
song-lyrics

a potom jako vždy, složené závorky,
vlastnost, dvojtečka, hodnota.

Ta-dá!

Celý text písničky má žluté pozadí.

A co by se stalo, kdybychom
tady to "s" napsali velké?

Nefunguje to.

To proto, že u názvů tříd
záleží na velikosti písmen.

Anglicky této vlastnosti
říkáme case-sensitive,

neboli citlivé na velikost.

A co by se stalo, kdybychom
místo tečky napsali křížek?

Zase to nefunguje.

Protože takhle si prohlížeč myslí,
že "song-lyrics" je ID,

a protože v atributu ID nic nenajde,

tak to vzdá.

A co se stane, když do našeho
jména přidáme mezery?

Hm, to taky nefunguje,

protože v názvech tříd mezery být nesmí.

A později uvidíme,

že mezera má ve světě CSS
svůj vlastní význam.

Tak to zase vrátíme zpátky.

Takže ještě jednou:

Když chceme přidat třídu,

vymyslíme jméno třídy,

přidáme ho do atributu
class v HTML.

Potom napíšeme pravidlo stylu,

které začíná s tečkou
a pokračuje jménem třídy.

A teď je vaše CSS opravdu třída!