Selettori nei CSS

In questo articolo studieremo cosa sono i selettori nei CSS e come utilizzarli.

Abbiamo visto nella lezione precedente come creare un foglio di stile esterno, in questa lezione vedremo come inserire i vari elementi al suo interno e quindi partiremo proprio dai selettori nei CSS.

Cosa sono i selettori nei CSS e come utilizzarli

Come abbiamo già detto, per definire uno stile nei CSS vengono utilizzati i selettori.

I selettori servono infatti ad applicare un determinato stile ad uno o più elementi della pagina web. Vediamo quanti tipi di selettori esistono.

Selettore universale

Il selettore universale si indica con l’asterisco. Facciamo un esempio di utilizzo:

* { 
   margin:0; 
   padding:0;
}

In questo esempio azzeriamo i margini e il padding di tutti gli elementi della pagina. Per intenderci il margin è la distanza tra il bordo di un elemento e gli elementi adiacenti mentre il padding è la distanza tra il testo e il bordo del contenitore dove è incluso. Più avanti farò alcuni esempi.

Selettore di tipo

Mediante questo selettore si applica lo stesso stile ai tag dello stesso tipo; ad esempio o a tutti i paragrafi o a tutti i titoli h1 o ancora a tutti i div.

Vediamo un esempio di utilizzo:

body {
  font-size:12px;
}
p {
  font-size:1.5em;
  text-align:left; 
  background:#ccc;
}
h1, h2, h3, h4, h5, h6 {
  color: #252525;
  line-height:1em;
}
h1{
  font-size:4.5em;
}
h2{
  font-size:4em;
}
h3{
  font-size:3em;
}
h4{
  font-size:2.5em;
}
h5{
  font-size:2em;
}
h6{
  font-size:1.3em;
}

In questo esempio tutto quello che scriveremo all’interno di tutti i tag p presenti nel documento sarà allineato a sinistra e lo sfondo di tutti i paragrafi sarà di colore grigio chiaro.

Tutti i tag dei titoli avranno come colore #252525 che corrisponde al grigio scuro e la distanza tra le righe nel testo sarà di 1.5 em.

A quanto corrisponde 15. em?

1em corrisponde alla dimensione assegnata al documento, nel tag body, dunque 1em=12px. Allora 12 x 1.5=18 px.

Se non assegniamo a body la dimensione del font, di default 1em è pari a 16px.

Successivamente, per ogni tag del titolo, specifico la dimensione del carattere; chiaramente h1 è più grande di h2 che a sua volta è più grande di h3, ecc…

Selettore mediante l’uso delle classi

Le classi si definiscono all’interno dei vari tag html e permettono di applicare lo stile non a tutti i tag della stessa categoria, ma solo a quelli desiderati.

Le classi si utilizzano anteponendo un punto davanti al nome. Il nome deve essere significativo al fine di poterlo richiamare intuitivamente all’occorrenza.

Ecco un esempio di selettore di nome blu che ipotizziamo di inserire nel nostro foglio di stile.

.blu {
   color:#0000ff; 
}

Inoltre nella pagina html dobbiamo inserire:

<p class="blu">Coding creativo...</p>

Così solo il paragrafo a cui è associato quella classe avrà il testo di colore blu.

Selettore mediante l’uso degli id

L’identificativo id ha la stessa funzione delle classi ma deve essere univoco.

Ogni elemento (tag) deve avere un solo id e più elementi non possono avere lo stesso tag id.

Ad esempio, inseriamo questi id differenti all’interno dei due paragrafi:

<p id="blu">Coding creativo...</p>
<p id="rosso">Coding creativo...</p>

Invece questo non è possibile:

<p id="blu">Coding creativo...</p>
<p id="blu">Coding creativo...</p>

Anche questo non è possibile:

<p id="blu" id="allineamento">Coding creativo...</p>

Gli id non si indicano con il punto ma con il simbolo # davanti al nome. Vediamo qualche esempio:

#blu {
   color:#0000ff;
}
#allinemento { 
  text-align: justify;
}

Quello che accomuna tutti i tipi di selettori è la sintassi:

selettore {

proprietà:valore;
}

Nel prossimo articolo studieremo le pseudo-classi e faremo degli esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Font nei CSS

CSS border – border width

Border style CSS

Border color CSS