Come cambiare colore in HTML con le VARIABILI CSS – Impara a programmare in HTML e CSS

Impara a programmare in HTML e CSS

Nel mondo dello sviluppo web, imparare a gestire i colori è una delle prime tappe fondamentali. Ma se stai usando tanti colori nel tuo progetto, gestirli manualmente può diventare un incubo. Ecco dove entrano in gioco le variabili CSS: uno strumento semplice ma potente che ti permette di cambiare i colori del tuo sito in un attimo, in modo centralizzato e organizzato.

In questo articolo ti spiegherò come cambiare colore in HTML usando le variabili CSS, passo dopo passo.

Cosa sono le variabili CSS?

Le variabili CSS, introdotte con CSS3, ti permettono di definire dei valori riutilizzabili nel tuo foglio di stile. Funzionano in modo simile alle variabili nei linguaggi di programmazione: una volta definite, puoi usarle ovunque nel tuo codice CSS.

Esempio:

:root {
  --colore-primario: #3498db;
  --colore-secondario: #2ecc71;
}
In questo esempio, abbiamo definito due variabili di colore all’interno del selettore :root, che rappresenta l’elemento principale del documento (in pratica, il html). Questo rende le variabili disponibili in tutto il tuo foglio di stile.

Come usare le variabili per cambiare colore

Dopo aver definito le variabili, puoi utilizzarle nei tuoi stili CSS ovunque useresti un colore.

body {
  background-color: var(--colore-primario);
  color: white;
}

button {
  background-color: var(--colore-secondario);
  color: white;
}

Se vuoi cambiare tutti i colori del tuo sito, ti basta modificare i valori delle variabili nella sezione :root:

:root {
--colore-primario: #e74c3c; /* rosso */
--colore-secondario: #8e44ad; /* viola */
}

Con un’unica modifica, tutto il tuo sito avrà un nuovo look!

Esempio pratico completo

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Colori con variabili CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1>Cambia colore con le variabili CSS</h1>
  <button>Cliccami</button>
</body>
</html>
CSS (stile.css)
:root {
  --colore-primario: #1abc9c;
  --colore-secondario: #f39c12;
}

body {
  background-color: var(--colore-primario);
  color: white;
  font-family: sans-serif;
  text-align: center;
  padding: 50px;
}

button {
  background-color: var(--colore-secondario);
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  color: white;
  cursor: pointer;
}

Vantaggi delle variabili CSS

  • Riutilizzabili: definisci il colore una sola volta, usalo ovunque.

  • Centralizzate: cambia un valore, cambia tutto il design.

  • Ideali per temi: perfette per dark mode e light mode.

  • Più leggibili e manutenibili: codice più pulito e semplice da aggiornare.

Conclusione

Usare le variabili CSS per cambiare colore nei tuoi progetti HTML è un trucco fondamentale per scrivere codice pulito, efficiente e facilmente aggiornabile. Se stai imparando HTML e CSS, inizia presto a usarle: ti aiuteranno a ragionare da vero sviluppatore.

Continua a esplorare il mondo del web design con articoli pratici come questo e vedrai che HTML e CSS non sono poi così complicati!