Fogli di stile CSS

Cascading Style Sheets, ovvero fogli di stile a cascata. Linguaggio che permette d’informare al browser circa l’aspetto da conferire ai vari tag presenti nel documento HTML.

Nasce nel 1996 con lo scopo di superare le incompatibilità tra i vari browser e separare la struttura di un documento dalla sua formattazione.

Questa guida si occupa di presentare le tecniche base dei CSS, un’altra guida si occuperà di presentare le modifiche e i nuovi tag relativi alla versione CSS3.

I fogli di stile possono essere:

• interni, significa che il codice è scritto direttamente all’interno del documento HTML, esistono due modi:
  • inline, stile all’interno del tag HTML che si desidera cambiare;
    

    <p style = “color: #FF0000;”> rosso</p>

  • incorporati, insieme di istruzioni CSS inseriti nella parte head del documento HML, le istruzioni vanno inserite tra i tag <style> e </style>;
    
• esterni, significa che il codice è scritto in un file con estensione .css separato dal file HTML;
  
  • rel, indica la relazione tra il documento HTML ed il file linkato;
  • type, definisce il tipo di file;
  • href, fa riferimento al percorso e nome file CSS;

L’attributo media permette di applicare fogli di stile diversi in base al dispositivo utilizzato dall’utente, i valori sono:

• all, ogni dispositivo;
• braille, dispositivi basati sul braille;
• embossed, stampanti braille;
• handheld, dispositivi portatili con display piccolo;
• print, stampanti;
• projection, presentazioni;
• screen, schermo del computer;
• speech, dispositivi di sintesi vocale;
• tty, terminali;
• tv, televisori;

Le regole sono l’elemento principale di cui è costituito un foglio di stile:

• selettore, serve per definire gli elementi a cui applicare un dato stile;
• { }, all’interno delle parentesi viene specificato il blocco delle dichiarazioni;
  • ogni dichiarazione è composta da proprietà e corrispondente valore separati dai due punti (:);
  • le dichiarazioni chiave/valore vengono separate con un punto e virgola (;);

Ogni linguaggio prevede l’inserimento di commenti che non va interpretato, per indicare l’inizio e la fine del commento si usa /* commento */. I commenti possono essere su più linee.