HTML informa il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.

I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno resi su un media specifico (schermo, stampante, dispositivo mobile).

Un foglio di stile può essere esterno e interno:

  • È esterno un foglio di stile definito in un file separato dal documento.
  • Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.

Un foglio esterno si carica:

  • Utilizzando l’elemento <LINK>.
  • Usando @import.

Un foglio interno può essere compilato

  • utilizzando l’elemento <style>
  • Utilizzando l’attributo style di un singolo elemento

Uso dell'elemento <LINK>

La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento (X)HTML:

<html>

  <head>

  <title>Inserire i fogli di stile in un documento</title>

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

  </head>

<body>

La direttiva @import

Un altro modo per caricare CSS esterni è usare la direttiva @import .

  • La direttiva @import può essere usata all'interno dell'elemento <style>:

<style>

  @import url(stile.css);

</style>

  • Oppure all’interno di un foglio di stile:

                                       @import url(stile.css);

 

In entrambi i casi le regole contenute nel foglio di stile saranno importate, aggiunte a quelle già caricate.