Corso di HTML

I CSS

I CSS (Cascading Style Sheets, fogli di stile a cascata) sono la tecnologia elaborata dal W3C per determinare l'aspetto delle pagine web (cfr. Troiani, CSS).

Lie L'idea dei fogli di stile venne all'informatico norvegese Hakon Wiu Lie (qui di lato vediamo una sua foto) nel 1994 quando lavorava al Cern di Ginevra con Tim Berners-Lee, il padre dell'HTML.

Le specifiche CSS1 sono state rilasciate dal W3C nel 1996; le CSS2 nel 1998. Attualmente sono in fase di implementazione nei vari browser le specifiche CSS3.

Tali specifiche consentono di scrivere codice HTML ben strutturato, leggero, semanticamente corretto e, nel contempo, di avere il pieno controllo sull'aspetto finale della pagina (cfr. Troiani, CSS).

Cosa sono i CSS?

I CSS sono semplicemente un insieme di regole il cui compito é quello di istruire il browser su come debbano essere rappresentati i vari elementi HTML. (cfr. Troiani, CSS).


Vediamo allora come si presenta una regola CSS:

  p{
  margin-right: 20px;
  margin-left: 20px;
  text-align: justify;
  font-family: derive unicode;
  }
  

In questo caso, la regola CSS controlla le quattro proprietá margin-right, margin-left, text-align, font-family.

Ciascuna di esse é impostata ad un certo valore.

Ad esempio, la proprietá margin-right imposta il margine destro a 20px (parleremo in seguito dei pixel); mentre text-align assume il valore justify, che giustifica il testo. font-family, invece, assume il valore derive unicode, che é il nome della famiglia di font utilizzata.

La coppia proprietá-valore prende il nome di dichiarazione.

Ogni dichiarazione è inserita tra due parentesi graffe.

La p che precede la parentesi graffa di apertura prende il nome di selettore ed indica l'elemento HTML cui si applica la regola.

Nel nostro caso, dunque, la regola si applica a tutti i paragrafi.

Dove va collocata nel documento la regola CSS?

Una delle possibilitá consiste nell'inserirla tra il tag contenitore <style> ed il suo tag di chiusura </style> nell'intestazione del documento:

  <html>
  <head>
  ...
  <style>
  p{
  margin-right: 20px;
  margin-left: 20px;
  text-align: justify;
  font-family: derive unicode;
  }
  </style>
  </head>
  ...