Esercizio - Selettori

Completato

Nell'esercizio precedente è stato applicato lo stile agli elementi, ad esempio html e h1. Spesso è necessario essere un po' più ristretti nell'applicazione dello stile.

In questo esercizio, imposterai lo stile per le sezioni e i collegamenti dei social media e dell'esperienza nella pagina.

Applicazione dello stile a classi e ID

Si inizia impostando lo stile per le sezioni dei social media e dell'esperienza.

1. Tornare alla finestra di vscode.dev usata nell'esercizio precedente.

2. All'interno index.html, notare l'elemento section con l'ID dei social media alla riga 10; si applica lo stile a questa sezione per impostare il colore al blu.

3. Alla fine di style.css aggiungere il CSS seguente per impostare il colore per l'elemento social media:

   #social-media {
       color: blue;
   }
   

4. La pagina si aggiorna, impostando il contenuto nella sezione dei social media su blu.

5. All'interno index.htmlnotare le due sezioni alle righe 28 e 32 con l'esperienza di classe; Si applica lo stile a queste sezioni per mettere in corsivo il carattere.

6. Alla fine di style.css aggiungere il CSS seguente per modificare il tipo di carattere per gli elementi con la classe esperienza:

   .experience {
       font-style: italic;
   }
   

7. La pagina si aggiorna, impostando il carattere all'interno dell'esperienza su corsivo.

Utilizzo di pseudo-classi per impostare lo stile del collegamento

Molti sviluppatori Web modificano il colore e lo stile dei collegamenti ipertestuali in una pagina. È possibile impostare il colore verde per i collegamenti ed evidenziare i collegamenti quando un utente ci passa sopra con il mouse.

1. Alla fine di style.css aggiungere il CSS seguente per impostare i collegamenti in modo che siano sempre verdi:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. La pagina viene aggiornata per visualizzare i collegamenti come verdi.

3. Aggiungere il codice CSS seguente alla fine di style.css per evidenziare i collegamenti quando viene posizionato il puntatore del mouse su di essi:

   a:hover {
       background-color: yellow;
   }
   

4. Passare il puntatore del mouse sui collegamenti nella pagina e notare che i collegamenti sono evidenziati.

Revisione

Lo screenshot seguente mostra i risultati del CSS applicato. Sono state usate classi, ID e pseudoclassi per applicare stili a elementi specifici e gruppi logici di elementi.