Per ii fogli di stile esterni, dovremo preparare dei file con estensione .css a parte. Ci sono due modi. Il primo è attraverso l'istruzione link da specificare nella sezione head:

<link rel="stylesheet" type="text/css" href="mieistili.css">

Con l'istruzione 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:

<link rel="stylesheet" type="text/css" href="stampa.css" media="print">

Il secondo modo è la regola @import, da indicare 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.