Per includere fogli di stile esterni all’interno delle pagine HTML, che possiamo aver preparato creando dei file con estensione .css, ci sono due modi.
1. Il primo metodo, il più comune, consiste nell’uso del tag link all’interno della sezione head:
<link rel="stylesheet" type="text/css" href="mieistili.css">
Nel tag link possiamo indicare l’attributo media, così da poter specificare
a quali dispositivi è rivolto il CSS esterno. Per un CSS per la stampa, ad esempio, scriveremo:
<link rel="stylesheet" type="text/css" href="stampa.css" media="print">
2. Il secondo modo sfrutta la direttiva @import, da inserire in un blocco style sempre all’interno della sezione head. In questo caso, i dispositivi a cui i CSS sono rivolti possono essere indicati con l’attributo media (come per i CSS incorporati) oppure subito dopo il file. Ecco per esempio come si includono due CSS, uno per lo schermo e uno per la stampa:
<style type="text/css">
@import url(schermo.css") screen,projection;
@import url("stampa.css") print
</style>
I due modi di indicare i CSS esterni sono praticamente equivalenti ai fini pratici, anche se la regola @import non è supportata dai browser obsoleti.