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!