Esercizi Selettori di Elementi CSS

Codegrind Team•Jul 16 2023

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>