Cosa sono i CSS?
L'acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e designa un linguaggio di stile per i documenti web. I CSS, in ultima istanza, istruiscono un browser o un altro programma utente su come il documento debba essere presentato all'utente, per esempio definendone i font, i colori , le immagini di sfondo o il posizionamento delle colonne o di altri elementi sulla pagina.
I CSS non sono un linguaggio di programmazione, e come tali sono accessibili a chiunque disponga di un editor di testi o di un programma similare. Per esempio, i CSS non dispongono di cicli, istruzioni di salto o di qualsiasi altra funzionalità che possiamo trovare in un linguaggio di programmazione (come ad esempio JavaScript). I fogli di stile operano esclusivamente sugli elementi che compongono un documento web, sia che si tratti di un documento HTML o XHTML finanche ai documenti XML. In altre parole, i CSS lavorano in tandem con i più diffusi linguaggi di marcatura sul web.
Sintassi dei CSS
Si supponga di volere che tutti i paragrafi di un documento HTML siano visualizzati con un colore del testo verde. Con i CSS possiamo scrivere:
p {
color: green;
}Quella che abbiamo appena scritto è una regola CSS. Essa consta di:
- Uno o più selettori (
p) - Una parentesi graffa aperta
- Una proprietà CSS (
color) immediatamente seguita dai due punti - Un valore CSS (
green) immediatamente seguito dal punto e virgola - Una parentesi graffa chiusa
All'interno di una regola CSS, i punti tre e quattro possono essere anche più di uno, ossia possiamo avere più proprietà e valori e, a sua volta, una proprietà CSS accetta anche più di un valore. Ecco uno schema riassuntivo.
Come collegare i CSS ad un documento
Per i documenti HTML e XHTML possiamo:
- Salvare il codice CSS in un file con estensione
.csse quindi usare l'elementolinkall'interno dihead(pratica migliore):<head> <link rel="stylesheet" href="stili.css" type="text/css" /> </head> - Inserire il codice CSS all'interno dell'elemento
styleall'interno dihead(consigliato per pagine singole):<head> <style type="text/css"> p { color: green; } </style> </head> - Usare l'attributo
stylesull'elemento HTML di cui vogliamo cambiare lo stile (sconsigliato):<p style="color: green;">...</p>
Per i documenti XML dobbiamo invece salvare il codice in un file con estensione .css e quindi usare la seguente PI (Processing Instruction):
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stili.css" type="text/css"?>
