In questo articolo vedremo come creare i fogli di stile esterni, che poi collegheremo alla nostra pagina web.
Il nostro sito web può avere uno o più fogli di stile esterni; comunque è consigliabile non esagerare, infatti già più di 5 sono considerati troppi.
Quale editor utilizzare per creare i fogli di stile esterni?
Per semplicità possiamo creare i nostri CSS esterni con il notepad++ (che potete scaricare gratuitamente da questo sito https://notepad-plus-plus.org/). In alternativa potete utilizzare anche con il blocco note che già avete installato, come programma predefinito, sul vostro computer.
La differenza non è solo visiva. Infatti con notepad i colori differenziano le varie parti dei CSS e diventa più semplice così trovare eventuali errori commessi. Ma, requisito importante di questo software è che quando si inizia a scrivere compaiono i suggerimenti. Questi suggerimenti aiutano nella programmazione, in quanto consentono di inserire più facilmente le varie parti di codice.
Con notepad inoltre è possibile, come con il blocco note, creare pagine html, xml, php, cpp, ecc…
Il suo utilizzo è molto semplice e intuitivo, in quanto comprende una barra dei menù e una barra degli strumenti che aiutano nelle operazioni.
Sviluppo del nostro foglio di stile esterno
Dunque apriamo il nostro editor preferito e diamo un nome al nostro CSS, io ad esempio l’ho chiamato style.css. Dopo lo salviamo nella stessa cartella dove si trova la pagina html.
Se ci sono più fogli di stile esterni allora sarà opportuno creare una cartella ad esempio di nome CSS, dove all’interno andrò ad inserire tutti i miei fogli di stile esterni.
Ricordiamo che il foglio di stile esterno si deve collegare alla nostra pagina web. Dunque apriamo la pagina html che abbiamo creato con il blocco note o notepad++ e inseriamo questo codice tra l’apertura e la chiusura di head.
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
...
</head>Per inserire più fogli di stile esterni allora possiamo includere altri link, come da esempio:
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
...
</head>In questo caso ho inserito un collegamento ai fontwesome che sono quelle icone speciali, che potete consultare al seguente link https://fontawesome.com/v4.7.0/ che è possibile utilizzare gratuitamente all’interno di un sito e più avanti vi spiegherò come fare.
Alcuni link utili
Fogli di stile interni, esterni ed in linea
Come impostare le pseudo-classi