Lez.14 - Corso Base Css

Il Selettore ID in un folgio di stile Css

Selettore ID

Il selettore, come si intuisce dalla stessa parola, serve per selezionare uno o più elementi della nostra pagina web.
In particolare il Selettore ID seleziona un elemento html, in pratica individua, identifica un elemento unico che avrà uno stile tutto suo.

Soltanto quell'elemento avrà quel particolare id.
Quindi un id è un codice identificativo (un marcatore, un'etichetta) che noi assegnamo a qualsiasi elemento della nostra pagina web e a qualsiasi tag.

Tutto questo per poter assegnare delle regole css a quell'unico elemento selezionato affinché abbia, uno stile unico, uno stile tutto suo.

Un'altra cosa da dire è che c'è una differenza tra il selettore di Classi (che vedremo nella prossima lezione) e il selettore ID.
Le classi possono essere assegnate a diversi elementi, mentre l'ID è sempre univoco.
Ogni elemento può avere uno ed un solo ID ed al contempo non possono esistere due diversi elementi col medesimo ID.

Per definire un selettore id si mette un marcatore all'elemento html, in questa maniera: id="nomeScelto"

Per richiamare il marcatore nel foglio di stile si fa precedere il nome del marcatore dal simbolo del cancelletto # :
#nomeScelto

Sintassi completa:
#nomeScelto { color:red; }

E' possibile usare una sintassi con elemento:
p#nomeScelto

Sintassi completa:
p#nomeScelto { color:red; }

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Il Selettore ID</title>
  <meta charset="utf-8">
  <style type="text/css">
     body {
	     background-color: pink;
     }
     #pippo2 {
         background-color: green;
         color: white;
         text-decoration: underline;
     }
     #pluto {
         background-color: red;
         color: yellow;
         text-decoration: underline;
     }
  </style>
 </head>
 <body>			    
    <h1>Il Selettore ID</h1>
    <p>Paragrafo 1</p>
    <p id="pippo2">Paragrafo 2</p>
    <p>Paragrafo 3</p>
    <p id="pluto">Paragrafo 4</p>
 </body>               
</html>