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 - Un valore CSS (
green - 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
.csslinkhead
<head>
<link rel="stylesheet" href="stili.css" type="text/css" />
</head>
{{/code}} - Inserire il codice CSS all'interno dell'elemento
stylehead
<head>
<style type="text/css">
p {
color: green;}
</style>
</head>
{{/code}} - Usare l'attributo
style
<p style="color: green;">...</p>
{{/code}}
Per i documenti XML dobbiamo invece salvare il codice in un file con estensione .css
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stili.css" type="text/css"?>