Esercizi Selettori di Elementi CSS
Affina le tue abilità nel selezionare e stilizzare specifici elementi HTML con i selettori di elemento in CSS. Pratica l’uso di selettori semplici per applicare stili mirati a determinati elementi della pagina.
Esercizio 1
Crea una pagina HTML con diverse intestazioni e paragrafi Usa il selettore CSS per cambiare il colore del testo di tutte le intestazioni in blu e il colore del testo dei paragrafi in verde.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> h1, h2, h3 { color: blue; }
p { color: green; } </style> </head> <body> <h1>Titolo livello 1</h1> <h2>Titolo livello 2</h2> <h3>Titolo livello 3</h3> <p>Questo è un paragrafo.</p> <p>E questo è un altro paragrafo.</p> </body></html>
Esercizio 2
Crea una pagina HTML con un elenco non ordinato e un elenco ordinato, entrambi contenenti alcuni elementi di lista. Usa il selettore CSS per cambiare il colore del testo di tutti gli elementi di lista in rosso.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> ul li, ol li { color: red; } </style> </head> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> </body></html>
Esercizio 3
Crea una pagina HTML con un campo di input di tipo testo e un elemento di intestazione. Usa il selettore CSS per cambiare il colore del testo del campo di input in blu e il colore del testo dell'intestazione in verde.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> input { color: blue; }
h2 { color: green; } </style> </head> <body> <input type="text" placeholder="Inserisci il testo qui" /> <h2>Titolo dell'intestazione</h2> </body></html>
Esercizio 4
Crea una pagina HTML con una tabella contenente alcune righe e colonne. Usa il selettore CSS per cambiare il colore del testo di tutte le celle della tabella in grigio.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> table td { color: grey; } </style> </head> <body> <table> <tr> <td>Riga 1, Colonna 1</td> <td>Riga 1, Colonna 2</td> </tr> <tr> <td>Riga 2, Colonna 1</td> <td>Riga 2, Colonna 2</td> </tr> </table> </body></html>
Esercizio 5
Crea una pagina HTML con diversi paragrafi. Usa il selettore CSS per cambiare il colore del testo di tutti i paragrafi in blu.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> p { color: blue; } </style> </head> <body> <p>Questo è un paragrafo.</p> <p>Questo è un altro paragrafo.</p> <p>E ancora un altro paragrafo.</p> </body></html>
Esercizio 6
Crea una pagina HTML con un link. Usa il selettore CSS per cambiare il colore del testo del link in arancione.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> a { color: orange; } </style> </head> <body> <a href="#">Questo è un link</a> </body></html>