Třída v CSS stylu

V CSS jazyce můžete použít vlastní třídu kaskádového stylu. Vlastní třída v kaskádovém stylu je využívána hlavně jen u těch HTML tágu, které chceme nastavit parametry kaskádového stylu. Po definování třídy musí být v HTML tágu zadán atribut CLASS, který bude obsahovat jméno třídy: syntaxe CLASS="jméno_třídy", pokud HTML tág nebude obsahovat atribut CLASS tak nebude HTML tág nastaven podle kaskádového stylu.

Jak správně psát jméno třídy?
Jméno třídy by nemělo obsahovat českou diakritiku což jsou háčky a čárky nad některými písmeny, nikdy nepište "čmáranice", ale raději použijte "cmaranice". Mezi pravidla také patří, že první znak třídy nesmí být nikdy číslice nebo mezera.
Při používání CSS třídy je důležité dát si pozor když píšete jméno třídy, u jména třídy se totiž rozlišuje velikost písmen to znamená, že jméno třídy "Novy" a "novy" jsou dvě odlišné třídy kaskádového stylu.

Každá třída vždy začíná tečkou a za ní následuje jméno třídy, poté špičaté závorky a mezi nimi je zadán kaskádový styl.
Syntaxe: selektor.jmeno_css_tridy { ...zadání CSS stylu...; }

Příklad:

/* špatné jméno třídy */ 
.1novy { color: #008000 } 
. novy { color: #008000 } 

/* správné jméno třídy */ 
.novy1 { color: #008000 } 
.novy_1 { color: #008000 } 
._novy1 { color: #008000 } 

/* nová třída pro různé tágy, <TÁG CLASS="novy"> */
.novy { color: #008000; }

/* třída použitá pouze pro tágy DIV, <DIV CLASS="novinka"> */ 
div.novinka { 
   background-color: #008080; 
   color: #FFFF00; 
}


Třída CSS stylu jako Identifikátor

Druhý způsob definování třídy pro kaskádový styl je pomoci identifikátoru. V HTML tágu se na třídu kaskádového stylu musíte odkazovat pomoci atributu ID="jméno_třídy".

Mezi nevýhody definování třídy pomoci identifikátoru je v tom, že by se tato třída měla v dokumentu vyskytovat pouze jedenkrát. Kaskádový styl s identifikátorem by měl být totiž jedinečný a neopakovatelný. Proto se tento typ třídy kaskádových stylů vůbec neuchytil a já osobně nedoporučuji používat.

Každá třída vždy začíná mřížkou (#) a za ní následuje jméno třídy, poté špičaté závorky a mezi nimi je zadán kaskádový styl.
Syntaxe: selektor#css_trida { css_styl; }

Příklad:

/* nová třída pro různé tágy, <TÁG ID="novy"> */ 
#novy { color: #008000; } 

/* třída pouze pro tágy DIV, <DIV ID="novinka"> */
div#novinka { 
   background-color: #008080; 
   color: #FFFF00; 
}