Abbiamo scritto regole CSS con lo stile interno e lo stile inline: può essere utile quando abbiamo una pagina HTML, ad esempio una pagina “Coming Soon” ma quando ci troviamo davanti un progetto più grande, con molte pagine, non sono metodi efficienti, per due motivi:
- scrivendo le regole CSS internamente o inline dobbiamo ripetere il procedimento per ogni singolo file
- il browser sarà costretto a scaricare ogni regola ad ogni pagina
Come capirai, non è quello che fa per noi.
I fogli di stile (CSS) vanno scritti in un file esterno (external file sheet).
Come scrivere un CSS esterno:
scarica i files cliccando sul bottone a fine tutorial
N. B.: il file che scaricherai è quello completo del foglio di stile (nella cartella CSS) e già collegato al file HTML.
Per esercitarti, prova a cancellare o commentare la riga, all’interno del tag <head>, che collega il file CSS, in questo modo:
/* righe di codice da commentare */
- apri il tuo editor preferito (io utilizzo Sublime Text 3)
- Crea una nuova cartella dal nome “CSS”
- File -> nuovo -> Salva con nome
- Salva con nome: style.css ed inseriscilo nella cartella CSS appena creata
Adesso dovresti avere due files: index.html che contiene la struttura della pagina e style.css in cui inseriremo le regole CSS.
Facendo ciò avrai una struttura ben organizzata e saprai sempre dove sono i tuoi files.
Collegare il foglio di stile alla pagina HTML
è semplicissimo, all’interno del tag <head>, subito dopo il <title>, scrivi così:
<link rel="stylesheet" href=“css/style.css">
il tag <link> possiede diversi attributi, in questo caso stai inserendo l’attributo “stylesheet” e l’attributo “href”.
Il primo “dice” al file che si tratta di un foglio di stile, il secondo stabilisce qual’è il collegamento (che, come avrai notato, segue il percorso del CSS, prima la cartella poi il nome del file).
Adesso, possiamo scrivere alcune regole nel file style.css:
Allinea il testo della pagina
body {
text-align: center;
}
Dai uno stile al titolo <h1>
h1 {
font-size: 72px;
color: white;
}
Lo sfondo del <header>
header {
background-color: green;
}
Infine, la dimensione del font del paragrafo
p {
font-size: 20px;
}
Se provi a salvare tutto e ricaricare il browser, noterai che la pagina si presenta già meglio, certo, non hai realizzato un capolavoro ma hai aggiunto correttamente le regole CSS al tuo file HTML. Bene.
Questo esercizio serve, specialmente, a farti capire quanto sia importante collegare il CSS esternamente ai file HTML.
Se avessi 40 0 1000 pagine con le stesse regole e volessi cambiarne una, ti basterebbe farlo nel file style.css e non in ogni singolo file.
Una precisazione:
se vuoi, puoi collegare alle pagine HTML altri fogli di stile ma, considerato che ogni file collegato richiede che il browser lo scarichi, ti consiglio di non collegarne più di due o tre.
Scarica i files
1 commento