Come Usare un File CSS in HTML

Info sull'Autore

L'HyperText Markup Language, meglio noto come HTML, definisce lo standard con cui vengono formattate e impaginate le informazioni contenute in una pagina web. Il Cascading Style Sheets, meglio noto come CSS, è un linguaggio utilizzato per definire l'aspetto e lo stile grafico di ogni singolo elemento che compone una pagina web. Un file CSS può essere abbinato a un file HTML sia come foglio di stile esterno sia come foglio di stile interno. Nel primo caso il codice CSS sarà memorizzato in un file separato dal codice HTML, mentre nel secondo caso coesisteranno all'interno del medesimo file. Prosegui nella lettura per scoprire come utilizzare un file CSS in HTML per personalizzare il design di un sito web.

Metodo 1

Metodo 1 di 2:

Usare un File CSS Esterno

1
Crea un file CSS. Apri un nuovo file di testo vuoto, inserisci il codice CSS e salvalo con l'estensione ".css".
2
A questo punto carica il tuo file CSS sul sito web a cui vuoi abbinarlo.
3
Copia l'URL del file CSS. Il relativo indirizzo dovrebbe avere un aspetto simile a www.sito_web.com/nome_file_CSS.css.
- È buona norma eliminare dall'URL il nome del dominio principale. Per esempio, l'indirizzo con cui fare riferimento al seguente file CSS http://mio_sito_web.com/css/default.css dovrebbe essere semplicemente "/css/default.css". È necessario includere il primo slash ("/") perché l'URL funzioni. Questo tipo di indirizzo viene chiamato in gergo "percorso relativo".
4
Aggiungi il link ottenuto al file HTML. Individua il tag </head> all'interno del file HTML in esame, quindi crea una nuova linea di testo esattamente sotto al tag e incolla il codice <link rel=stylesheet type="text/css" href="www.sito_web.com/nome_file_CSS.css">. A questo punto modifica l'URL presente nell'attributo "href=" con quello relativo al file CSS che desideri utilizzare.
5
Salva il file HTML e pubblicalo sul sito web a cui fa riferimento.
6
Controlla che tutti gli elementi che compongono il tuo sito web abbiano l'aspetto e lo stile grafico che dovrebbero avere. Se qualcosa non funziona, dovrai apportare tutte le modifiche necessarie al file CSS per risolvere il problema.

Pubblicità

Metodo 2

Metodo 2 di 2:

Usare un File CSS Interno

1
Crea il tag <style> all'interno del file HTML. Inseriscilo dopo il tag </head> creando una nuova linea di testo in cui andrà inserito il seguente codice:

<STYLE type="text/css">

</STYLE>

Immagine titolata Add a CSS File to HTML Step 7

1
Aggiungi tutto il codice CSS necessario per formattare l'aspetto grafico del sito web all'interno dei tag <STYLE> e </STYLE> appena creati.
2
Salva il file HTML con l'estensione ".html".
3
Controlla che tutti gli elementi che compongono il tuo sito web abbiano l'aspetto e lo stile grafico che dovrebbero avere. In caso contrario apporta tutte le modifiche necessarie al file CSS per risolvere il problema.

Pubblicità

Consigli

Controlla sempre l'aspetto assunto dal sito web su ci stai lavorando utilizzando browser internet e piattaforme hardware differenti. Alcuni browser interpretano il codice CSS in modo leggermente diverso e questo accade anche fra versioni differenti (per Mac e per Windows) dello stesso browser. Se effettuando questa prova il sito web appare visivamente diverso quando si cambia browser, soprattutto nel caso di elementi grafici specifici come la spaziatura fra liste, il problema è da ricercare nelle (relative) impostazioni di configurazione predefinite del browser (toglierei). Crea o scarica un CSS Master da inserire all'inizio del foglio di stile CSS che andrai a usare, in modo che le impostazioni predefinite del browser internet vengano ignorate a favore di quelle che hai creato.
Se è possibile, usa un CSS esterno. In questo modo potrai modificare (variare?) lo stile e l'aspetto del sito modificando esclusivamente il codice del file CSS anziché dover modificare il codice CSS presente all'interno di ogni pagina che lo compone.
Se il sito web su cui stai lavorando risulta insensibile alle modifiche apportate al file CSS, controlla attentamente tutto il codice che hai creato per essere certo di non aver dimenticato dei dettagli importanti. Fai particolare attenzione ai punti e virgola (";") e alle parentesi graffe di chiusura ("}"). Si tratta di elementi fondamentali che è molto facile dimenticare di inserire nei CSS.
Se salvi un file HTML in locale sul computer, sarai in grado di aprirlo direttamente nel browser, in modo da verificare l'aspetto grafico e lo stile prima di pubblicarlo online. Per farlo però il file CSS dovrà essere inserito all'interno del file HTML per fare in modo che le relative regole vengano utilizzate correttamente.
Quando il codice di un file CSS presenta delle contraddizioni interne, per esempio se viene indicato in due punti diversi il colore che dovrà assumere il testo (prima blu poi rosso), ricorda che la condizione che verrà applicata sarà sempre l'ultima. Allo stesso modo, proseguendo con l'esempio precedente, se la prima istruzione si trova all'interno di un file CSS esterno, mentre la seconda si trova in un file CSS interno, verrà sempre applicata la seconda.

Avvertenze

Non utilizzare il codice CSS "in linea", cioè incluso direttamente all'interno dei tag HTML. Per esempio il codice "align='center'" rappresenta un modo di usare i CSS in linea. Si tratta di uno stile di programmazione datato e non corretto, che rende molto difficile apportare modifiche e correzioni successive, quando ad esempio si ha la necessità di aggiornare un sito web esistente e magari creato da altre persone.