Esercizi Variabili CSS

Codegrind Team•Jul 16 2023

splora il concetto di variabili CSS e come possono rendere il tuo codice più modulare e facile da gestire. Allenati nell’uso delle variabili per memorizzare valori comuni e riutilizzarli in tutto il tuo foglio di stile.

Esercizio 1

Crea una variabile CSS per il colore di sfondo di un div e utilizzala per impostare il colore di sfondo del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      :root {
        --colore-sfondo: lightblue;
      }

      div {
        width: 200px;
        height: 100px;
        background-color: var(--colore-sfondo);
      }
    </style>
  </head>
  <body>
    <div>Questo è un div</div>
  </body>
</html>

Esercizio 2

Crea una variabile CSS per il colore del testo di un paragrafo e utilizzala per impostare il colore del testo del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      :root {
        --colore-testo: red;
      }

      p {
        color: var(--colore-testo);
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo di testo.</p>
  </body>
</html>

Esercizio 3

Crea una variabile CSS per la dimensione del font di un paragrafo e utilizzala per impostare la dimensione del font del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      :root {
        --dimensione-font: 20px;
      }

      p {
        font-size: var(--dimensione-font);
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo di testo con font di dimensione variabile.</p>
  </body>
</html>

Esercizio 4

Crea una variabile CSS per la larghezza e l'altezza di un div e utilizzale per impostare la larghezza e l'altezza del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      :root {
        --larghezza-div: 200px;
        --altezza-div: 100px;
      }

      div {
        width: var(--larghezza-div);
        height: var(--altezza-div);
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>Questo è un div con larghezza e altezza variabili.</div>
  </body>
</html>

Esercizio 5

Crea una variabile CSS per il colore di sfondo e la dimensione del font di un paragrafo e utilizzale per impostare lo stile del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      :root {
        --colore-sfondo: lightyellow;
        --dimensione-font: 24px;
      }

      p {
        background-color: var(--colore-sfondo);
        font-size: var(--dimensione-font);
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con stile variabile.</p>
  </body>
</html>

Esercizio 6

Crea una variabile CSS per il colore di sfondo e il colore del testo di un elemento `a` e utilizzale per impostare lo stile del link.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      :root {
        --colore-sfondo-link: cyan;
        --colore-testo-link: navy;
      }

      a {
        background-color: var(--colore-sfondo-link);
        color: var(--colore-testo-link);
        text-decoration: none;
        padding: 5px;
        display: inline-block;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo è un link con stile variabile</a>
    <a href="#">Questo è un altro link</a>
  </body>
</html>

Esercizio 7

Crea una variabile CSS per la larghezza del bordo di un elemento `div` e utilizzala per impostare lo stile del bordo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      :root {
        --larghezza-bordo: 3px;
      }

      div {
        width: 200px;
        height: 100px;
        border: var(--larghezza-bordo) solid black;
      }
    </style>
  </head>
  <body>
    <div>Questo è un div con bordo di larghezza variabile.</div>
  </body>
</html>

Esercizio 8

Crea una variabile CSS per il margine e il padding di un elemento `p` e utilizzale per impostare lo spazio intorno al paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      :root {
        --margine-paragrafo: 20px;
        --padding-paragrafo: 10px;
      }

      p {
        margin: var(--margine-paragrafo);
        padding: var(--padding-paragrafo);
        background-color: lightpink;
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con spaziatura variabile.</p>
  </body>
</html>

Esercizio 9

Crea una variabile CSS per il colore di sfondo e la dimensione del font di un paragrafo all'interno di un div e utilizzale per impostare lo stile del div e del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      :root {
        --colore-sfondo-div: lavender;
        --dimensione-font-paragrafo: 20px;
      }

      div {
        background-color: var(--colore-sfondo-div);
        padding: 20px;
      }

      p {
        font-size: var(--dimensione-font-paragrafo);
      }
    </style>
  </head>
  <body>
    <div>
      <p>Questo è un paragrafo all'interno di un div con stile variabile.</p>
    </div>
  </body>
</html>

Esercizio 10

Crea una variabile CSS per il colore di sfondo di un link quando viene fatto clic su di esso e utilizzala per impostare lo stile del link cliccato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      :root {
        --colore-sfondo-link-cliccato: lightcoral;
      }

      a:active {
        background-color: var(--colore-sfondo-link-cliccato);
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>