Teoria
Teoria

Collegamento di stili esterni

Molto spesso gli stili vengono collegati da un file esterno con estensione .css. A tale scopo, si utilizza il tag <link>. Ad esempio:

<head>
  <link href="external.css" rel="stylesheet">
</head>

L'attributo href imposta l'indirizzo del file e l'attributo rel="stylesheet" indica al browser che stiamo inserendo gli stili e non qualcos'altro.

È meglio includere gli stili all'interno di <head>, ma non è necessario. Il tag <link> funzionerà in altre parti della pagina.

In questo compito, si inserirà un file di stile esterno, che si trova all'indirizzo external.css(seguire il link per aprire questo file nel browser).

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Collegamento di stili esterni</title>  </head> <body> <h1>Stili esterni</h1> <p>Gli stili esterni sono molto più convenienti di quelli incorporati, in quanto è possibile collegare lo stesso file di stile a molte pagine.</p> <p>Se è necessario apportare modifiche agli stili, si modifica un file e le modifiche appaiono su tutte le pagine a cui è collegato.</p> <p>In questo caso è necessario intervenire sugli stili incorporati.</p> </body> </html>

ObiettiviFatto

Collegare un file di stile esterno alla pagina. Per farlo:

Aggiungere un tag <link> all'interno di <head>,
attribuirgli un attributo rel con il valore stylesheet
e l'attributo href con il valore external.css.