Guide IDE CSS
Capitolo 0 · Prima di programmare
Installare gli strumenti per CSS
Una guida gratuita che parte da zero: cosa serve, dove scaricarlo, come verificare che funzioni e come eseguire il tuo primo programma.
1. Quali programmi servono?
VS Code, browser e DevTools. Installa sempre gli strumenti dai siti ufficiali indicati qui sotto; evita installer sconosciuti e programmi aggiuntivi non richiesti.
2. Scegli il tuo sistema operativo
Windows: installazione e verifica
- Crea index.html e style.css nella stessa cartella. Nel head della pagina inserisci il link al CSS e apri index.html nel browser.
- Apri il terminale nella cartella del tuo progetto e verifica i comandi.
- Crea il primo file ed esegui l’esempio di controllo.
Passaggi / comandi di esempio
<link rel="stylesheet" href="style.css">Se qualcosa non funziona
Se lo stile non appare, controlla percorso del file, errori nei selettori e scheda Network dei DevTools.
Se lo stile non appare, controlla percorso del file, errori nei selettori e scheda Network dei DevTools.
macOS: installazione e verifica
- Crea i due file in VS Code; collega style.css con un percorso relativo. Aggiorna la pagina nel browser per vedere le modifiche.
- Apri il terminale nella cartella del tuo progetto e verifica i comandi.
- Crea il primo file ed esegui l’esempio di controllo.
Passaggi / comandi di esempio
open index.htmlSe qualcosa non funziona
Il nome del file è sensibile a maiuscole/minuscole su molti sistemi: style.css non equivale sempre a Style.css.
Il nome del file è sensibile a maiuscole/minuscole su molti sistemi: style.css non equivale sempre a Style.css.
Ubuntu / Linux: installazione e verifica
- Lavora in una cartella con index.html e style.css. Apri la pagina con il browser e usa Ispeziona per leggere le regole applicate.
- Apri il terminale nella cartella del tuo progetto e verifica i comandi.
- Crea il primo file ed esegui l’esempio di controllo.
Passaggi / comandi di esempio
xdg-open index.htmlSe qualcosa non funziona
Se una proprietà non funziona, guarda il pannello Computed nei DevTools e verifica la cascata.
Se una proprietà non funziona, guarda il pannello Computed nei DevTools e verifica la cascata.
3. Primo programma: verifica pratica
Crea un file con l’estensione corretta, copia questo esempio e prova ad avviarlo. Se ottieni il risultato atteso, sei pronto per il primo capitolo.
Il primo programma
h1 { color: #2196f3; font-family: system-ui, sans-serif; }4. Metodo per risolvere gli errori
- Leggi tutto il messaggio di errore e individua il nome del file o del comando.
- Controlla estensione del file, percorsi, maiuscole e versioni installate.
- Esegui l’esempio più piccolo possibile prima di aggiungere nuovo codice.
- Se un messaggio non è chiaro, cercalo nella documentazione ufficiale e annota la soluzione.