Esercizio - Selettori

Completato

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

In questo esercizio si imposterà lo stile per le sezioni relative ai social media e all'esperienza e i collegamenti nella pagina.

Applicazione di stile a classi e ID

Si inizierà impostando lo stile per le sezioni relative ai social media e all'esperienza.

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

2. All'interno di index.html, si noti l'elemento section con l'ID dei social media alla riga 10; si applicherà lo stile a questa sezione per impostare il colore su 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 verrà aggiornata, impostando il contenuto nella sezione dei social media su blu.

5. All'interno di index.html, si notino le due sezioni alle righe 28 e 32 con la classe esperienza; applicare lo stile a queste sezioni per rendere corsivo il tipo di 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 viene aggiornata, impostando il tipo di carattere all'interno dell'esperienza su corsivo.

Uso di pseudoclassi per impostare lo stile di collegamento

Molti sviluppatori Web modificano il colore e lo stile dei collegamenti ipertestuali in una pagina. Impostare il colore per i collegamenti su verde ed evidenziare i collegamenti quando un utente passa il puntatore del mouse su di essi.

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.