Come creare CSS

Come inserire una tabella di stile

Quando legge una tabella di stile, il browser la utilizza per formattare il documento HTML. Ci sono tre modi per inserire una tabella di stile:

Tabella di stile esterna

Quando lo stile deve essere applicato a molte pagine, le tabelle di stile esterne sono la scelta ideale. Nei casi in cui si utilizzano tabelle di stile esterne, puoi cambiare l'aspetto di tutto il sito modificando un singolo file. Ogni pagina utilizza il tag <link> per collegarsi alla tabella di stile.<link> tag nella testa del documento:

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

Il browser legge le dichiarazioni di stile dal file mystyle.css e le utilizza per formattare il documento.

Le tabelle di stile esterne possono essere modificate in qualsiasi editor di testo. Il file non deve contenere tag HTML. Le tabelle di stile devono essere salvate con l'estensione .css. Ecco un esempio di file di tabella di stile:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Non lasciare spazi tra il valore dell'attributo e l'unità. Se usi "margin-left: 20 px" invece di "margin-left: 20px", funziona solo in IE 6, ma non nei browser Mozilla/Firefox o Netscape.

Tabella di stile interna

Quando un documento singolo richiede uno stile speciale, dovresti utilizzare una tabella di stile interna. Puoi definire una tabella di stile interna utilizzando il tag <style> nella testa del documento, come segue:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Stile inline

Poiché il misto di presentazione e contenuto perde molti vantaggi delle tabelle di stile, usa questo metodo con cautela, ad esempio quando lo stile deve essere applicato a un singolo elemento.

Per utilizzare lo stile inline, devi utilizzare l'attributo (style) all'interno dei tag pertinenti. L'attributo Style può contenere qualsiasi proprietà CSS. Questo esempio mostra come cambiare il colore del paragrafo e il margine sinistro:

<p> style="color: sienna; margin-left: 20px">
Questo è un paragrafo
</p>

Stili multipli

Se alcune proprietà sono definite con lo stesso selettore in diversi fogli di stile, il valore dell'attributo viene ereditato dal foglio di stile più specifico.

Ad esempio, il foglio di stile esterno ha tre proprietà per il selettore h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

Mentre il foglio di stile interno ha due proprietà per il selettore h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Se la pagina con il foglio di stile interno collegato anche al foglio di stile esterno, lo stile ricevuto da h3 sarà:

color: red; 
text-align: right; 
font-size: 20pt;

L'attributo di colore sarà ereditato dal foglio di stile esterno, mentre l'allineamento del testo (text-alignment) e la dimensione del carattere (font-size) saranno sostituiti dalle regole del foglio di stile interno.