CSS: cosa sono e guida introduttiva

Link copiato negli appunti

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 .css e quindi usare l'elemento link all'interno di head (pratica migliore):
```
<head>
<link rel="stylesheet" href="stili.css" type="text/css" />
</head>
```
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>
```
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

Indice lezioni

Guida introduttiva ai CSS

Cosa sono i CSS?

Sintassi dei CSS

Come collegare i CSS ad un documento

Riferimenti

Ti consigliamo anche

Un countdown animato con HTML e CSS

Animazioni allo scorrimento del mouse con HTML e CSS

Morphing CSS: trasformare forme e immagini

CSS: zoom su immagini al passaggio del mouse