Un foglio di stile (CSS) è un file collegato alle pagine di un sito web che determina tanti parametri all'interno del sito stesso.

Solitamente il foglio di stile viene impiegato per determinare la formattazione del testo interno alle pagine. Non per essere riduttivi, ma preferisco soffermarmi su questo argomento dato che il testo nel linguaggio HTML è trattato in modo superficiale, ed appunto per rimediare a questa iniziale leggerezza è stato inventato il foglio di stile.

Quello che segue è il contenuto del foglio di stile della pagina che si sta leggendo, ed è stato applicato ad un Template, un modello di pagina web, dell'Editor Dreamweaver 4 di Macromedia.

Come si può notare il nome dello stile non è stato dato a caso, la codifica ordinata del tutto salta subito agli occhi.

.blk10n { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-align: justify; margin-right: 5px; margin-left: 5px}

Si comincia col nome del colore dello stile: "blk" sta per BLACK-NERO, (la scelta del nome inglese è soltanto per genetica esterofilia del webmaster ed anche perchè il sottoscritto preferisce usare tutte le applicazioni nella loro lingua madre), così il nero diventa black (BLK), il bianco white (WHT) e via dicendo.

La seconda parte della codifica riguarda la dimensione, in questo caso 10 sta per 10 pixel. A proposito, un foglio di stile supporta molte misure di grandezza del carattere - pixel, points, picas, inches, cm, ems, exs, % - ma siccome non tutti vengono visualizzati allo stesso modo dai vari browser, il consiglio è quello di usare solo ed esclusivamente il Pixel, "letto e scritto" correttamente da tutti i browser.

L'ultima parte è appannaggio del particolare stile applicato al carattere:

• "n" per Normal (regolare),
• "b" per Bold (grassetto),
• "i" per Italic (corsivo),
• "j" per Justify (giustificato);

oltre questi se ne possono coniare a bizzeffe ed allungare il nome dello stile all'infinito, personalmente sconsiglio un nome troppo lungo e pieno di lettere e numeri, un nome corto infatti si riconosce immediatamente, non crea confusione ed il lavoro scorre meglio.

Con l'apertura della parentesi graffa {, ({= MAIUSC+CTRL+ALT+è), comincia la scrittura dello stile vero e proprio:

• la famiglia del carattere - font-family:Verdana, Arial, Helvetica, sans-serif; - chiudendo sempre la stringa col punto e virgola;
• la misura del carattere - font-size: 10px;
• il colore (in esadecimale) - color: #000000;
• l'allineamento del testo - text-align: justify;
• la distanza dal bordo a destra e a sinistra, misurata anch'essa in pixel - margin-right: 5px; margin-left: 5px;

e via via tutto quanto ci occorre stabilire per far si che quel determinato stile - .blk10n - , abbia tutte le caratteristiche che ci occorrono nella formattazione di una determinata porzione del testo della pagina web. Alla fine della stringa chiuderemo con la parentesi graffa } (}= MAIUSC+CTRL+ALT++).