CSS: id e classi

Id e Classi sono due attributi che possono essere applicati ad ogni elemento: vengono definiti nel foglio di stile e poi assegnati ad un elemento all' interno della pagina XHTML.

 

<style type=”text/css”>
.testo {
font: 12px arial, Helvetica, sans-serif;
color: #FF0000;
}
</style>
<p class=”testo”>prova testo</p>

 

Qual' è la differenza tra un ID e una classe? Si sceglie un Id per identificare in modo univoco un elemento, cioè una volta assegnato ad un elemento di una pagina XHTML non potrà essere utilizzato per un'altro elemento all' interno della stessa pagina XHTML. Un classe invece può essere utilizzata più volte all' interno della stessa pagina. Se invece voglio utilizzare una regola per tutti i paragrafi di una pagina utilizzerò un selettore di tipo elemento.
 

Class: la classe si definisce ponendo il . punto prima del nome del selettore class

.testo { color: #FF0000;}

posso applicare una classe ad ogni tipo di selettore XHTML

p.testo { color: #FF0000;}

 

è possibile creare anche delle classi multiple in modo da poterle gestire all' interno del codice del documento XHTML:

p.testo.grassetto { color: #FF0000; font-weight:bold;}
<p class=”testo grassetto”>prova testo</p>
<p class=”grassetto”>prova testo</p>

 

ID: si ottiene aggiungendo il cancellato # davanti al selettore

#titolo {color: #000000;}

Anche per l'ID è possibile utilizzare il selettore con l'elemento, anche se essendo l' ID univoco, questa sintasi risulta superflua.

h1#titolo { color: #000000; }