CSS

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. 

L'utilizzo dei CSS è molto importante quando vogliamo creare un sito in HTML. In questo caso , se volessimo cambiare il colore o lo sfondo del nostro sito, dovremmo effettuare molte modifiche. Con l'utilizzo dei CSS questo viene evitato in quanto, possiamo cambiare lo stile in vari modi:

Sintassi CSS

La sintassi CSS è in genere composta da tre parti: uno o più Selettore separati da una virgola, una o più coppie Proprietà/Valoreseparate 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;

}

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:

 

Questo � un tag formattato con CSS

Questo � un tag formattato con CSS

 

tratto dal sito raggiungibile cliccando il seguente link.

 

Altri esempi

ESEMPIO: HTML styles

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>