Obiettivo della lezione
Inserire correttamente un file CSS esterno e capire la differenza tra percorsi relativi e assoluti.
Spiegazione
Il CSS si collega nell’head della pagina con il tag link. Usare un file esterno è meglio che scrivere tutto dentro ogni pagina, perché permette di mantenere lo stesso stile in tutto il sito.
Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.
Codice di esempio
Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.
<link rel="stylesheet" href="assets/css/style.css">
<!-- Da una pagina dentro una sottocartella -->
<link rel="stylesheet" href="../assets/css/style.css">Errori comuni
- Sbagliare il percorso quando la pagina è in sottocartella.
- Dimenticare
rel="stylesheet". - Modificare il CSS ma vedere la cache del browser.
Esercizio pratico
Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.
- Apri il tuo editor.
- Crea o aggiorna un file
.htmlo.asp. - Inserisci il codice della lezione.
- Modifica testi e attributi.
- Apri la pagina nel browser e controlla il risultato.
Lezioni collegate
Continua il laboratorio
Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.