Home esercizi css colori di sfondo

Esercizi Background-Color CSS

Metti in pratica l’applicazione di colori di sfondo ai tuoi elementi HTML utilizzando le regole CSS. Esplora come rendere il tuo sito web più accattivante e coinvolgente attraverso questi esercizi ed esegui le soluzioni fornite per consolidare le tue conoscenze.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il colore di sfondo del paragrafo su rosso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha uno sfondo rosso.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Utilizza il CSS per impostare il colore di sfondo degli elementi di lista su giallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      ul li {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con tre paragrafi all'interno. Utilizza il CSS per impostare il colore di sfondo del primo paragrafo su verde, del secondo paragrafo su rosso e del terzo paragrafo su blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      p:nth-child(1) {
        background-color: green;
      }

      p:nth-child(2) {
        background-color: red;
      }

      p:nth-child(3) {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <p>Primo paragrafo (verde)</p>
    <p>Secondo paragrafo (rosso)</p>
    <p>Terzo paragrafo (blu)</p>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un div all'interno. Utilizza il CSS per impostare il colore di sfondo del div su #ffcc00.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      div {
        background-color: #ffcc00;
        height: 150px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div>Questo div ha uno sfondo #ffcc00.</div>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Utilizza il CSS per impostare il colore di sfondo di tutti gli elementi di lista su arancione.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      li {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Utilizza il CSS per impostare il colore di sfondo del link su verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        background-color: green;
        padding: 5px 10px;
        color: white;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo link ha uno sfondo verde.</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un paragrafo all'interno. Utilizza il CSS per impostare il colore di sfondo del paragrafo su trasparente.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      p {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha uno sfondo trasparente.</p>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una tabella all'interno. Utilizza il CSS per impostare il colore di sfondo di tutte le celle della tabella su grigio.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      table {
        width: 100%;
      }

      th,
      td {
        background-color: grey;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Intestazione 1</th>
        <th>Intestazione 2</th>
      </tr>
      <tr>
        <td>Cella 1</td>
        <td>Cella 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con tre div all'interno. Utilizza il CSS per impostare il colore di sfondo del primo div su rosso, del secondo div su verde e del terzo div su blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        margin: 10px;
        display: inline-block;
      }

      div:nth-child(1) {
        background-color: red;
      }

      div:nth-child(2) {
        background-color: green;
      }

      div:nth-child(3) {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>