CSS, aggiungere un foglio di stile al documento

Un foglio di stile può essere interno oppure esterno al documento. Quest'ultima possibilità è quella più seguita dal momento che ci permette di scrivere il foglio di stile con un qualunque editor di testo (anziché scriverlo, come vedremo, all'interno del documento) oppure con un programma ottimizzato come bluefish. L'altra soluzione ci permette invece di risolvere alcuni problemi, ma di questo ne parleremo alla fine. Esistono essenzialmente tre modi per assegnare un foglio di stile a un documento:

Foglio di stile collegato: è possibile indicare al browser che interpreta la pagina HTML il foglio di stile da usare per il documento attraverso il tag link. Tale dichiarazione va fatta all'inizio del documento e quindi all'interno del tag head. Ecco un esempio: link rel="stylesheet" type="text/css" href="./style.css". Alcuni attributi richiesti dal tag sono obbligatori: rel indica la relazione che sussiste tra il documento HTML e il foglio di stile (i possibili valori sono stylesheet e alternate), type indica il tipo di dati che per i fogli di stile è sempre text/css, href indica il path (assoluto o relativo) al foglio di stile. L'attributo media è usato per indicare il supporto (il tipo di dispositivo) a cui applicare il foglio di stile e non è obbligatorio (di default è impostato sul valore all).

Uso di @import: la direttiva @import va usata all'interno del tag style per specificare l'url del foglio di stile:@import url(./style.css);. Attenti al punto e virgola che chiude la dichiarazione!

Fogli di stile incorporati: con il tag style possiamo racchiudere l'intero foglio di stile che scriveremo quindi nella pagina HTML. L'attributo type dice al tag il tipo di stile.

Fogli di stile in linea: le proprietà da assegnare agli elementi possono essere date anche sulla stessa linea che definisce l'elemento nel documento! La sintassi prevede l'elenco di tutte le proprietà da applicare all'elemento separate da un punto e virgola, attraverso l'attributo style.

Tutti questi modi di dichiarare l'uso dei fogli di stile possono spiazzare l'utente. Alcuni modi di inserire i fogli di stile, poi, sembrano nuovamente mischiare l'html e il css. Se in parte questo è vero va subito detto che l'esistenza di certe metodologie per l'inserimento di fogli di stile esiste in verità per risolvere alcuni casi particolari. Di sicuro il metodo più usato è quello che prevede l'uso di un foglio di stile collegato o importato.

Se però vogliamo un determinato stile per un elemento di una precisa pagina ecco allora che l'uso di un foglio di stile in linea risolve il problema. Non abusate di questo concetto, il W3C ha recentemente deprecato l'uso dei fogli di stile in linea.

Va poi detto che i fogli di stile osservano una precisa gerarchia per l'ereditarietà: una proprietà definita nel foglio di stile viene cioè applicata a tutti gli elementi figli a meno di nuove descrizioni che sovrascrivono quindi la proprietà ereditata.