I fogli stile CSS servono per formattare l’aspetto delle pagine di un sito senza scrivere codice html.

Il vantaggio è una maggiore velocità di caricamento delle pagine (una volta caricata la home e i fogli stile, non rimane che il contenuto), la possibilità di cambiare i fogli stile per cambiare l’aspetto grafico aumentando significativamente la possibilità di fare modifiche “al volo” ed infine, una maggiore indicizzazione sempre per il motivo che sulle pagine c’è solo il contenuto.

Il linguaggio css si appoggia all’html formattandone i tag; per fare ciò occorre individuare dove scrivere le regole in quanto è possibile posizionarle in tre modi differenti:

1) scrivere le regole su fogli stile esterni (consigliato):
le regole valgono per tutto il sito visto che il file .css verrà associato ad ogni pagina.

2) scrivendo le regole nell’intestazione (head) delle pagine html:
le regole valgono per la pagina sulla quale si sta lavorando e, di conseguenza, le modifiche.

3) posso scrivere le regole sui tag (css in linea):
le regole  valgono solo per il tag sul quale si scrive e possono essere difficilmente individuate, oltre che appesantire il codice

I metodi 2 e 3 sono sistemi che possono essere utilizzati per modifiche veloci e dove le regole non necessitano di essere modificate spesso, oppure per stabilire delle regole in più che differiscono dal resto del sito occasionalmente.

Oltre a distinguere le regole per le strutture css per il “dove” vengono scritte, si può fare una distinzione per il “chi” vengono create definendo il tipo di selettore; ogni regola deve infatti indicare anche chi la deve rispettare (tranne che per i css in linea, visto che vengono scritte direttamente sull’elemento da modificare) e anche qui abbiamo 3 situazioni differenti:

1) ID: posso dare un nome a qualsiasi tag html; in questo modo dovrò dire al css di formattare quegli elementi che si chiamano in quel modo. Se chiamo “contenitore” un div, dirò al css di formattare per ID tutti gli elementi che si chiamano così. Per dare un nome a un tag occorre scrivere il nome separato da un cancelletto in questo modo:

<div id=”contenitore”>contenuto-del-tag</div>

nota bene: é possibile dare lo stesso nome ad un solo elemento per pagina.

2) CLASSE: fare una regola css di classe significa creare la regola per nessuno e associarla successivamente all’elemento che voglio formattare; una regola di classe è quindi associabile a qualsiasi tag. Le regole per classe si distinguono per la presenza del punto che le separa dal nome del tag:

<div class=”nome_classe”>contenuto-del-tag</div>

nota bene: é possibile assegnare la stessa classe a qualsiasi elemento sulla pagina.

3) TAG: posso anche creare delle regole per i tag; in questo caso tutti i tag di quel tipo verranno formattati nello stesso modo. Se faccio per esempio una regole per il tag “table”, qualsiasi tabella inserirò nella pagina verrà formattata in quel modo (ovviamente in questo caso non si deve fare!). Le regole per tag vanno create per elementi html univoci nella pagina e/o univoci all’interno di altri elementi distinti (tag h1 dentro il div contenitore e il tag h1 dentro il div header)