Ti vengono fornite tre schede.
Aggiorna il layout seguendo i seguenti requisiti. Ogni scheda deve:
- Avere una **larghezza** di 200px.
- Avere **spaziatura interna** di 20px.
- Avere 15px di spazio **tra le schede**.
- Avere un **bordo** di 2 pixel di larghezza, stile solido e colore grigio.
- Mantenere la larghezza dichiarata **invariata** anche dopo aver aggiunto padding e bordo.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNhcmQiPkNhcmQgMTwvZGl2PgogICAgPGRpdiBjbGFzcz0iY2FyZCI+Q2FyZCAyPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjYXJkIj5DYXJkIDM8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgLyogQ2hhbmdlIHRoZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9

- Utilizzare la proprietà `width` per definire la larghezza dell'elemento.
- Utilizzare `padding` per la spaziatura interna.
- Utilizzare `margin` per creare spazio tra le schede.
- Utilizzare `border: 2px solid gray` per aggiungere il bordo.
- Utilizzare `box-sizing: border-box` per evitare che padding e bordo aumentino la larghezza totale.

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgd2lkdGg6IDIwMHB4OwogIHBhZGRpbmc6IDIwcHg7CiAgbWFyZ2luOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkIGdyYXk7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0=

Apprendi le nozioni fondamentali di CSS, il linguaggio di stile che trasforma l'aspetto delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate.

Comprendere come CSS si collega a HTML e come gli stili vengono applicati tramite i selettori. Applicazione di colori, stili del testo ed effetti hover per controllare la presentazione visiva.

Miglioramento della tipografia tramite altezza della linea, spaziatura, proprietà dei font e font personalizzati. Controllo delle famiglie di font, peso, stile e dimensione per una migliore leggibilità.

Controllo della struttura del layout tramite proprietà di margine, padding, bordi e larghezza. Comprensione del comportamento del dimensionamento del box e dei tipi di visualizzazione degli elementi come block, inline e inline-block.

Controllo dei layout orizzontali e verticali utilizzando le proprietà Flexbox. Regolazione della direzione, dell'allineamento e della spaziatura per strutturare i componenti dell'interfaccia utente.

Migliora i layout utilizzando colori di sfondo, immagini, pseudo-elementi e ombre. Stile dei componenti visivi per profondità e contrasto.

Sfida: Correggere un Layout Errato