Guida introduttiva ai CSS

Breve introduzione al linguaggio CSS, cosa sono e qual è il loro utilizzo.

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:

  1. Uno o più selettori (p)
  2. Una parentesi graffa aperta
  3. Una proprietà CSS (color) immediatamente seguita dai due punti
  4. Un valore CSS (green) immediatamente seguito dal punto e virgola
  5. 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.

css rule

Come collegare i CSS ad un documento

Per i documenti HTML e XHTML possiamo:

  1. Salvare il codice CSS in un file con estensione .css e quindi usare l’elemento link all’interno di head (pratica migliore):
    
<head>
<link rel="stylesheet" href="stili.css" type="text/css" />
</head>
  2. Inserire il codice CSS all’interno dell’elemento style all’interno di head (consigliato per pagine singole):
    
<head>
<style type="text/css">
p {
color: green;
}
</style>
</head>
  3. Usare l’attributo style sull’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"?>

Riferimenti

  1. Guida CSS: Tecniche essenziali
  2. Guida CSS di base
  3. Guida Layout dei siti con i CSS

I Video di HTML.it

Premiazione edizione italiana Imagine Cup 2013