Další silnou zbraní CSS jsou třídy.

Každá třída má své unikátní jméno a můžeme ji přiřadit libovolný počet vlastností. Do vytvořených tříd pak můžeme zařazovat jednotlivé tagy a tím na ně aplikovat dané vlastnosti.

Zápis tříd

Třída se zapisuje naprosto stejně jako obyčejný tag, abychom ji ale od tagu odlišili, vložíme před ní tečku.

Tímto jsme si vytvořili třídu mojetrida. Tag (element, prvek stránky) zařadíme do tého třídy pomocí výmluvného paramatru class.

Tečka není součástí názvu třídy, takže do class ji už nepřidávejte. Každému musí být jasné, že z principu se třída nedá definovat ve style=““, pouze v externím souboru nebo v tagu <style>.

Třída se dá nadefinovat i přímo pro určitý tag.

V tomto případě jsme nadefinovali třídu, ale pouze pro odkazy. Tedy text v odstavci zůstane normálně černý.

Jeden tag můžeme přiřadit do více tříd najednou.

Stačí je zapsat do class oddělené mezerou.

V prvním odstavci bude text červeně a bude mít dvojnásobnou velikost, zatímco v druhém odstavci bude text pouze dvojnásobný.

Na začátku jsme si řekli, že selector třída se používá podobně jako selector tag. Dají se tedy na ně aplikovat podobné konstrukce.

V tomto případě budou mít obě třídy nastavenou vlastnost font-size a odstavec navíc font-family.

Indetifikátor ID

Určitě jste se v HTML setkali s atributem id. Dá se přiřadit každému tagu na stránce (s výjimkou těch v hlavičce, tam je to zbytečné). Třeba takto:

ID slouží k jednoznačné identifikaci elementu v rámci stránky. Tedy nesmíte mít nastavené jedno ID pro dva prvky najednou.

A co s tím má společného CSS? ID se dá použít jako selector stejně jako tag či třída, jen se na začátek vkládá # místo ..

Jeden element může mít současně ID i třídu, přičemž přednost mají vlastnosti přiřazené ID.

Kdy volit ID, kdy třídu a kdy vůbec nic

• Rozmýšlíte-li se mezi ID a třídou, zvažte, kolikrát budete danou sadu vlastností potřebovat. Pokud se jedná třeba o definici vzhledu hlavičky na webu, která je obvykle jen jedna, je jednoznačnou volbou ID.
• Chystáte-li se již nadefinovat ID, zamyslete se nad tím, kolik vlastnosti vlastně daný element potřebuje. Jedná-li se naprosto bezvýznamný prvek na stránce, u kterého potřebujete mít o jedno větší písmo, použijte atribut style=““. Vyhnete se tak zbytečnému přehlcení externího souboru.
• Nemá cenu vytvářet třídu pro červené odkazy, když všechny odkazy budou stejně červené. Mnohem vhodnější je nadefinovat červenou barvu rovnou pro <a>.
• Vytváříte-li třídu pro červené odkazy a přitom 90% odkazů na stránce bude červených, je lepší globálně nastavit barvu odkazů na červenou a pak vytvořit třídu pro zbylých 10% odkazů, která změní jejich barvu na modrou.