La sigla CSS vuol dire "Cascading Style Sheets" ovvero "Fogli di Stile a Cascata", si chiamano così perchè le regole css vengono applicate "a cascata agli elementi che compongono la pagina". Ci forniscono un modo rapido e preciso (nonchè conforme agli standard del w3c) per visualizzare gli oggetti che compongono una pagina web, applicando delle semplici regole che vedremo nel corso del manuale.

Il loro punto di forza sta nella semplicità di utilizzo, e nella flessibilità che danno ai documenti prodotti. Supponiamo ad esempio di avere una pagina in cui c'è del testo che si ripete (ad esempio dentro una tabella) e di voler colorare il testo di rosso:

In HTML scriveremmo:

<table>
  <tr>
    <td> <font color="red">testo</font> </td>
  </tr>
  <tr>
    <td> <font color="red">testo</font> </td>
  </tr>
  <tr>
    <td> <font color="red">testo</font> </td>
  </tr>
  <tr>
    <td> <font color="red">testo</font> </td>
  </tr>
</table>

Possiamo ben immaginare che qualora volessimo cambiare il colore del testo, dovremmo effettuare pesanti modifiche sulle pagine.
Proviamo con i CSS

<style>
td {
  color: red;
}
</style>
<table>
  <tr>
    <td>testo </td>
  </tr>
  <tr>
    <td> testo</td>
  </tr>
  <tr>
    <td>testo</td>
  </tr>
  <tr>
    <td> testo</td>
  </tr>
</table>

Salta subito all'occhio che volendo cambiare il colore del testo, occorrerebbe modificare soltanto una riga di codice... inoltre un documento così prodotto è senza dubbio più piccolo e qunidi le vostre pagine saranno molto più veloci a caricarsi!

Ma i vantaggi dell'uso dei fogli di stile non si fermano qui, i CSS consentono di controllare con estrema precisione l'aspetto e la posizione dei nostri elementi, e cosa non trascurabile, tutte le proprietà css possono essere controllate lato client con JavaScript, consentendoci di cambiare ad esempio l'aspetto di un oggetto quando ci passiamo sopra con il mouse, o in base ad un evento!

Iniziamo adesso a vedere la sintassi CSS.

---

Sintassi CSS

La sintassi CSS è in genere composta da tre parti: uno o più Selettore separati da una virgola, una o più coppie Proprietà/Valore separate dal punto e virgola, come possiamo vedere nell'esempio:

selettore1, selettore2 {
  proprietà1: valore;
  proprietà2: valore;
  proprietà3: valore;
}

Un selettore, in genere è il tag HTML che di cui vogliamo controllare le proprietà, mentre le proprietà sono gli attributi che andremo a cambiare assegnando dei valori.

Esempio:

modifichiamo l'aspetto dei tag di tipo span all'interno di una pagina:

span { 
  font-family: verdana;
  text-align: right;
  font-weight: bold;
  color: #ffff00;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Il selettore di classe

Con il selettore di classe, è possibile definire stili diversi per lo stesso dipo di elemento HTML. Per esempio se volessimo due oggetti di tipo span, uno con il testo rosso ed uno con il testo blu, potremmo farlo nel seguente modo:

span.red {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: red;
}
span.green {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: green;
}

Poi utilizziamo i due attributi di classe nel nostro documento HTML:

<span class="green">Questo č un tag <span> formattato con CSS</span>
<span class="red">Questo č un tag <span> formattato con CSS</span>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Se omettiamo il nome del selettore, possimao utilizzare la classe per diversi tipi di elemento nelle nostre pagine:

.green {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: green;
}

Applichiamo quindi il nostro selettore a degli elementi della nostra pagina

<h1 class="green">H1 di colore verde </h1>
<h2 class="green">H2 di colore verde </h2>
<a class="green" href="#" >link di colore verde </a>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Il selettore ID

Un ID è una proprietà che tutti gli elementi HTML hanno, che serve ad identificare un elemento della nostra pagina in modo univoco. Questo vuol dire che non possiamo avere due elementi con lo stesso id.
Dal punto di vista dei CSS, possiamo sfruttare l'id degli elementi per caratterizzarne l'aspetto.

h1#capitolo1
{
  font-family: verdana;
  text-align: right;
  font-weight: bold;
  color: green;
}
h1#capitolo2
{
  font-family: verdana;
  text-align: right;
  font-weight: bold;
  color: red;
}

Abbiamo creato due stili diversi per due capitoli del nostro testo, applichiamoli.

<h1 id="capitolo1">H1 di colore verde </h1>
<p>Il titolo di questo paragrafo è verde</p>
<h1 id="capitolo2">H2 di colore rosso </h1>
<p>Il titolo di questo paragrafo è rosso </p>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Commenti CSS

Possiamo inserire dei commenti nei nostri fogli di stile per ricordarci cosa avevamo in mente quando li abbiamo creati, e per renderne più chiara la lettura.
I commenti sono del testo racchiuso tra i tag /* e */

/* Gestione capitoli*/
h1#capitolo2
{
  font-family: verdana;
  text-align: right;
  font-weight: bold;
  color: green; /*titolo verde*/
}
h1#capitolo2
{
  font-family: verdana;
  text-align: right;
  font-weight: bold;
  color: red; /*titolo rosso*/
}

---

CSS: come utilizzarli

Vediamo adesso come e dove inserire i fogli di stile nelle nostre pagine. Fondamentalmente abbiamo tre modi diversi per inserire un foglio di stile:

1. interni
2. esterni
3. inline

Fogli di stile interni

Un foglio di stile interno, è inserito direttamenre nella pagina HTML in cui viene utilizzato. E' comodo quando ne abbiamo bisogno in poche pagine, e quando abbiamo bisogno di gestire degli stili solo per la pagina in cui mettiamo il codice CSS.
Vediamo di seguito un esempio di realizzazione di stile interno in cui inseriamo alcuni elementi di cui potremo avere bisogno nella realizzazione di una pagina.

<html>
<head>
<title>Demo CSS</title>
<style>
h1 {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: green;
  text-indent: 10px;
  font-size: 14px;
}
#contenitore {
  width: 400px;
  border-top: 2px dotted #990066;
  padding: 10px;
}
p {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: black;
  text-indent: 20px;
  font-size: 11px;
  text-align: justify;
}
p:first-letter {
  font-size: 18px;
  color: green;
}
img {
  border: 2px dotted #990066;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
</head>
<body>
<h1>Le margherite </h1>
<div id="contenitore">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras placerat, urna a consectetuer commodo, enim neque mollis neque, non semper pede massa a orci. Integer interdum. Donec ligula sapien, mollis ut, scelerisque quis, commodo ac, arcu. </p>
<img src="demo5.jpg">
</div>
</body>
</html>

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Fogli di stile esterni

Possiamo inserire il nostro codice CSS in un file esterno alla pagina e poi referenziarlo all'interno delle nostre pagine. Questo risulta comodo quando abbiamo bisogno di utilizzare gli stessi stili all'interno di pagine diverse, in quanto ci consente di modificare l'aspetto di tutte le pagine in cui viene utilizzato il foglio di stile cambiando il codice di un unico file. Occorre inserire un tag <link> nella sezione head delle nostre pagine:
Il file contenente il codice CSS avrà ".css" come estensione.
Vediamo l'esempio precedente riscritto con l'utilizzo dei css esterni.

<html>
<head>
<title>Demo CSS</title>
<link rel="stylesheet" type="text/css" href="demo6.css" />
</head>
<body>
<h1>Le margherite </h1>
<div id="contenitore">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras placerat, urna a consectetuer commodo, enim neque mollis neque, non semper pede massa a orci. Integer interdum. Donec ligula sapien, mollis ut, scelerisque quis, commodo ac, arcu. </p>
<img src="demo6.jpg">
</div>
</body>
</html>

Mentre il file demo6.css conterrà esclusivamente il codice css, senza i tag <style>

h1 {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: green;
  text-indent: 10px;
  font-size: 14px;
}
#contenitore {
  width: 400px;
  border-top: 2px dotted #990066;
  padding: 10px;
}
p {
  font-family: verdana;
  text-align: left;
  font-weight: bold;
  color: black;
  text-indent: 20px;
  font-size: 11px;
  text-align: justify;
}
p:first-letter {
  font-size: 18px;
  color: green;
}
img {
  border: 2px dotted #990066;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Stili Inline

Un'altre possibilità per inserire del codice css nelle nostre pagine è applicarli ai singoli tag html. In questo caso verra cambiato l'aspetto del solo tag a cui viene applicato lo stile. Vediamo un esempio

<html>
<head>
<title>Demo CSS</title>
<link rel="stylesheet" type="text/css" href="demo6.css" />
</head>
<body>
<h1>Le margherite </h1>
<div id="contenitore">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras placerat, urna a consectetuer commodo, enim neque mollis neque, non semper pede massa a orci. Integer interdum. Donec ligula sapien, mollis ut, scelerisque quis, commodo ac, arcu. </p>
<img src="demo7.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras placerat, urna a consectetuer commodo, enim neque mollis neque, non semper pede massa a orci. Integer interdum. Donec ligula sapien, mollis ut, scelerisque quis, commodo ac, arcu. </p>
<img src="demo7.jpg" style="background-color:#00CC33">
</div>
</div>
</body>
</html>

Abbiamo cambiato lo stile dell'immagine <img src="demo7.jpg" style="background-color:#00CC33"> aggiungendo un colore di sfondo esclusivamente per l'immagine in questione, mentre le altre immagini mantengono lo stile di default.

¤ Clicca qui per visualizzare la demo dell'esempio... ¤