Un foglio di stile contiene una o più definizioni di stile. La sintassi per definire uno stile richiede che venga specificato un criterio di selezione e poi, tra parentesi graffe elencare le dichiarazioni, separandole con il punto e virgola. Ogni dichiarazione è una coppia attributo:valore.
Il criterio di selezione individua gli elementi della pagina web a cui applicare lo stile. Gli elementi della pagina web possono essere tag HTML, oppure una classe o un ID. Ad esempio
h1 {
color:blue;
font-size:12px
}
Il selettore è il tag h1 di html, mentre le dichiarazioni sono le due assegnazioni di un valore ad una proprietà, la prima assegna il valore blue alla proprietà color, la seconda assegna il valore 12 alla proprietà font-size.
Importante:
Non delimitare tra virgolette i valori assegnati alle proprietà
La sintassi dei fogli di stile va rispettata rigorosamente. Se ad esempio si omette un punto e virgola di separazione tra
le coppie proprietà:valore, la definizione di stile viene ignorata.
I fogli di stile hanno lo scopo di separare il contenuto di una pagina html dalla definizione dell'aspetto che le si vuole far assumere quando viene presentata all'utente. In altri termini una pagina web viene separata in due componenti:
Un foglio di stile contiene un elenco di definizioni di stile. Una definizione di stile CSS assegna le proprietà ad un elemento html.
La struttura di una definizione CSS è la seguente:
| ↓ Selettore | ↓ Dichiarazioni | ||
| body | { | ||
| background | : | antiquewhite; | |
| font | : | italic bold 1.5em Arial, Helvetica, Sans-serif; | |
| } | |||
| proprietà ↑ | valori ↑ | ||
Il campo Selettore può contenere uno o più nomi di elementi, presenti nella pagina web, separati da virgola e ai quali si applicano le proprietà descritte nelle definizioni racchiuse tra parentesi graffe.
Le dichiarazioni sono composte da coppie proprietà:valore, in cui la proprietà è un attributo legato alla visualizzazione dell'elemento e valore è una delle possibili scelte che si possono applicare alla proprietà. Le dichiarazioni sono separate tra loro dal carattere punto e virgola.
I selettori possono suddividersi in tre tipi.
selettori di elementi,
classi,
identificatori.
I commenti servono al progettista della pagina per annotare qualcosa che dal codice potrebbe non risultare e rappresenta un promemoria utile quando si dovrà apportare una modifica al codice. I commenti sono ignorati dal browser. Un commento inizia con /*, e termina con */, ad esempio:
/* Questo è un commento */
Il selettore di elemento è un marcatore (tag) html a cui si applicano le proprietà specificate con le dichiarazioni.
Nel campo selettore di una definizione CSS si possono elencare gli elementi a cui si applicano le dichiarazioni separandoli con una virgola, in tal modo più marcatori avranno le stesse proprietà. Ad esempio:
strong, h1 {
color:red
}
Il testo racchiuso tra il marcatore <strong></strong> oppure tra il marcatore <h1></h1> assume il colore rosso.
Una classe viene creata specificando un nome e facendolo precedere dal carattere punto. Le dichiarazioni verranno applicate a tutti i marcatori alla cui proprietà class viene assegnato come valore il nome specificato nella definizione di stile. Ad esempio, se la definizione di stile è:
.casella {
border-width:1em;
border-style:dotted;
border-color:#ccc;
}
Per applicarla ad un elemento div, così come a qualsiasi altro elemento, si deve assegnare il nome casella alla proprietà class, come nell'esempio seguente:
<div class="casella">
Questo testo si trova in un riquadro punteggiato
</div>
Un selettore di classe può essere associato a un particolare marcatore con la seguente sintassi:
(regola CSS:)
p.casella {
(dichiarazioni)
}
In questo caso le proprietà definite nella classe casella possono essere applicate solo agli elementi p a cui viene assegnato il valore casella alla proprietà class:
<p class="casella">…</p>.
Un determinato elemento può acquisire le proprietà definite in più classi, per ottenere ciò basta assegnare le classi, separate da uno spazio, alla proprietà class dell'elemento. Ad esempio, se ci fosse anche una classe .riquadro, per assegnare ad un elemento p sia le proprietà di casella sia di riquadro, si dovrebbe usare un marcatore come il seguente:
<p class="casella riquadro">…</p>.
Le proprietà da applicare ad un unico elemento della pagina possono essere raggruppate e individuate tramite un nome di identificazione. L'identificatore si distingue dalla classe perchè il suo nome è preceduto dal segno #.
#intestazione {
font-size:22px;
}
All'interno della pagina web vi deve essere un solo elemento avente la proprietà ID="intestazione".
È ammesso specificare proprietà per una combinazione di elementi, classi e identificatori, ad esempio:
h1#intestazione.titolo {
text-align:center;
}
L'elemento h1 della pagina, a cui si vogliono applicare le proprietà, ha la seguente forma:
<h1 id="intestazione" class="titolo">titolo pagina</h1>
In alcuni casi potrebbe volersi adottare la regola secondo cui dopo uno stile, ad esempio il titolo del paragrafo, deve seguire un determinato stile. In questo e in casi simili, il campo selettore è formato da un elenco di nomi di elementi, di identificatori o di classi separati da uno spazio. L'ordine con cui vengono elencati i nomi procede dal contenitore più esterno verso il più interno.
Ad esempio:
div p {
…
}
Lo stile si applica a tutti gli elementi p contenuti in un elemento div.
La discendenza tra un elemento contenitore e il suo elemento viene specificata separando i selettori con il simbolo >. Ad esempio:
div > p {
…
}
Lo stile si applica solo al primo elemento p contenuto nell'elemento div. Questa sintassi non è riconosciuta dai browser più vecchi.
h1+p {
…
}
Lo stile si applica all'elemento p che segue immediatamente (non contenuto) l'elemento h1.
Dichiarare gli stili in un foglio esterno conviene quando tutte le pagine usano gli stessi stili. Si evita quindi di ripetere le stesse dichiarazioni in ciascuna pagina. Ciascuna pagina deve contenere solo un riferimento, nel tag <link> che si deve trovare nella sezione head. Come ad esempio:
<head>
<link rel="stylesheet" type="text/css" href="stile.css" />
</head>
Il file contenente il foglio di stile deve avere estensione css e non deve contenere nessun tag html.
Si usa un foglio di stile interno quando lo stile vale solo per una pagina. Le dichiarazioni di stile si devono trovare nella sezione head, delimitate dai tag style:
<head>
<style type="text/css">
hr {
color:sienna;}
p {
margin-left:20px;
}
body {
background-image:url("img/figura.gif");
}
</style>
</head>
Usare questo metodo solo se necessario. Un qualsiasi tag possiede la proprietà style, la definizione consiste nello specificare questo attributo nel tag che interessa. L'esempio che segue cambia il colore e il margine di un paragrafo:
<p style="color:sienna;margin-left:20px">paragrafo.</p>