Per essere efficace, un foglio di stile deve seguire un ordine preciso, cominciando da dichiarazioni generali per l'intero documento e passando quindi a definire delle dichiarazioni particolari per sezioni specifiche. Nello scrivere tale foglio di stile si dovrebbero seguire delle buone pratiche che andiamo a riassumere:
Passiamo quindi alle dichiarazioni generali per il nostro documento.
Il codice generale appare diviso in quattro blocchi principali:
Vengono qui date le dichiarazioni generali per l'elemento body
. Si impostano i margini orizzontali su un
valore in percentuale, in modo da avere un layout fluido. Si impostano il colore del testo e dello sfondo, l'interlinea
e il tipo di font per il documento, nonché la sua dimensione.
Vengono qui date le dichiarazioni per lo stile dei collegamenti ipertestuali presenti nel documento, seguendo l'ordine
:link
, :visited
, :hover
, :active
. Si noti che al fine della semplice
conversione del documento sarebbe sufficiente attribuire uno stile solo alla pseudo-classe :link
. Si noti altresi
come la sottolineatura dei link sia stata eliminata a favore di un bordo inferiore, al fine di garantire un certo spazio tra la
linea di base del testo e la sottolineatura.
Si attribuiscono degli stili alle intestazioni presenti nel documento, seguendo l'ordine di importanza
h1
-h6
. Viene ridotta l'interlinea, assegnato un colore specifico, una spaziatura tra le lettere
(elementi h3
-h6
), ridotto lo spazio inferiore tra le intestazioni
h2
-h6
e gli elementi contigui, e si rende in lettere maiuscole il testo dell'elemento
h5
. Da ultimo, la classe .example
applicata ai soli elementi h5
fa in modo che questi
ultimi abbiano il testo di colore nero, non siano in lettere maiuscole ed abbiano una dimensione del font pari a quella
dell'elemento body
con il testo in grassetto.
Nel documento sono presenti delle note di redazione, prive di valore contestuale ai fini della comprensione del documento.
Per questo motivo sopprimiamo la loro visualizzazione marcandole con l'elemento ins
a cui assegniamo un valore
none
per la proprietà display
. Si noti che in questo modo tali note non verranno lette
dai lettori di schermo che interpretano tale dichiarazione (come Jaws). Se si ritiene che tali note abbiamo un valore ai fini
della comprensione del documento, si può ricorrere a questa dichiarazione alternativa:
Assegnando un valore negativo altissimo alla proprietà top
facciamo in modo che l'elemento
scompaia dalla finestra di visualizzazione. Questa tecnica ci permette di avere un'ottima compatibilità con i lettori
di schermo e gli altri programmi che non supportano i fogli di stile.