Si assegna un nome a un certo stile
|
1 |
.evidenziato { color:blue } |
che potrà essere utilizzato per elementi HTML diversi specificandolo con l’attributo class
|
1 2 3 |
<p class="evidenziato">Questo paragrafo apparirà blue</p> <p>Normale... <a class="evidenziato" href="...">link blue</a> ...ancora normale</p> <p class="evidenziato">Di nuovo blue</p> |
Risulta molto utile per condividere uno stile tra elementi altrimenti formattati in modo diverso: p td a …
Si può al contrario decidere di chiamare con lo stesso nome stili diversi applicati a tag diversi se si vuole sottolineare che lo scopo è lo stesso
|
1 2 |
p.evidenziato { color:blue } a.evidenziato { color:black } |
Quindi la classe evidenziato applicata a p lo rende blue, applicata ad a lo rende black
Anche le classi possono essere annidate e diventare sottoclassi
|
1 2 |
p.evidenziato { color:blue } p.evidenziato.centrato { text-align:center } |
Le due sottoclassi saranno indicate insieme
|
1 2 3 |
<p class="evidenziato">Paragrafo blue</p> <p class="evidenziato centrato">Paragrafo blue e centrato</p> <p>Paragrafo normale...</p> |