Sistema di variabili CSS personalizzato (colori, font, spacing)

Il primo passo per trasformare lo scheletro HTML in una pagina curata non è colorare subito i titoli, ma preparare una base coerente.

Apriamo il file style.css e inseriamo tre blocchi utili all’inizio di un nuovo progetto.

1. Importazione dei Font

Per questo progetto, useremo un font moderno e pulito: “Inter”. Assumiamo di usare il link fornito da Google Fonts (da incollare in alto nel CSS, o preferibilmente nell’<head> dell’HTML).

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

2. Il Design System (Variabili)

Costruiamo la nostra tavolozza dei colori e la nostra scala di spaziature all’interno del :root. Avremo un colore primario “Brand” (es. un viola acceso), uno sfondo chiaro per il sito, e un testo scuro.

:root {
  /* Tavolozza Colori */
  --clr-brand: #6366f1;         /* Indigo/Viola */
  --clr-brand-hover: #4f46e5;
  --clr-sfondo: #f8fafc;        /* Grigio chiarissimo quasi bianco */
  --clr-testo: #0f172a;         /* Blu notte scuro (meglio del nero puro) */
  --clr-testo-chiaro: #64748b;  /* Grigio per i sottotitoli */
  --clr-card: #ffffff;          /* Sfondo bianco per le card */

  /* Tipografia */
  --font-principale: 'Inter', system-ui, sans-serif;
  
  /* Sistema di Spaziatura (usiamo i rem) */
  --spazio-sm: 0.5rem;    /* 8px */
  --spazio-md: 1rem;      /* 16px */
  --spazio-lg: 2rem;      /* 32px */
  --spazio-xl: 4rem;      /* 64px */

  /* Bordo arrotondato standard */
  --raggio: 12px;
}

3. Il Reset Globale

Come imparato nelle prime lezioni, i browser aggiungono margini di default indesiderati e calcolano il box model in modo controintuitivo. Resettiamo tutto!

/* Seleziona TUTTI gli elementi (*) */
*, *::before, *::after {
  box-sizing: border-box; /* Il padding non ingrandisce le scatole! */
  margin: 0;
  padding: 0;
}

/* Regole base per il corpo della pagina */
body {
  font-family: var(--font-principale);
  background-color: var(--clr-sfondo);
  color: var(--clr-testo);
  
  /* L'interlinea è fondamentale per la leggibilità */
  line-height: 1.6; 
}

/* Le immagini non devono strabordare */
img {
  max-width: 100%;
  display: block;
}

/* Stile base dei link */
a {
  text-decoration: none;
  color: inherit;
}

Hai appena scritto una base solida. Ora l’HTML ha tipografia, colori e spaziature iniziali coerenti. Nella prossima lezione, inizieremo a posizionare gli elementi!