loader gif

Introduzione guida CSS

CSS – Fogli di stile

Il CSS (dall’inglese Cascading Style Sheets) è un linguaggio che viene utilizzato per la formattazione delle pagine Web scritte in HTML e ha come estensione file “.css”.
Nel 1996 il W3C emanò le specifiche CSS 1. I CSS erano un buon sistema per separare il contenuto e la formattazione di una pagina Web. Infatti il contenuto sarebbe stato scritto esclusivamente in (X)HTML mentre la formattazione sarebbe stata scritta in un documento separato e in un linguaggio diverso. Successivamente, col passare degli anni, risultò necessario evolvere i CSS (con l’arrivo dei nuovi browser, dei dispositivi mobili ecc…), attualmente siamo infatti alla versione CSS 3.

 

I pro del CSS

I CSS sono stati una rivoluzione nel mondo del Web Design:

  • Controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
  • Un controllo molto più preciso e omogeneo del layout;
  • L’applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.), responsive-design;
  • Un gran numero di tecniche avanzate e sofisticate per la gestione della grafica.

 

Che software utilizzo?

Io personalmente sconsiglio di utilizzare software come FrontPage, DreamWeaver ecc… E’ meglio un semplice blocco note o comunque programmi che non modificano né accelerano la compilazione di un documento CSS, dovete scrivere tutto voi, fare errori voi e correggerli voi. Un semplice editor di testo è ideale, vi rimando in questa pagina dove elenco i software con cui lavoro (vedi in fondo alla pagina).

N.B.: CSS Validator – Questo è un servizio di convalida fogli CSS, per sapere gli errori sintattici che commettete, molto utile, basta inserire il link del vostro foglio di stile “.css”.

 

Basi di CSS (requisiti: conoscenza HTML base)

Incominciamo dallo sfondo della pagina, per dargli colore occorre dare colore al <body>, il codice è il seguente:

body {background-color: #FF0000;}

selettore {proprietà: valore;}

N.B.: HTML Color Code è un sito dove potete scegliere il codice colore HTML che vi serve (e’ essenziale la tabella dei colori HTML per lavorare).

Come applicare questo codice CSS a un documento HTML? Ci sono tre metodi:

– Inline;
– Interno;
– Esterno;

Ci soffermeremo solo nell’applicazione più utilizzata e elegante, ossia l’applicazione esterna. L’applicazione esterna del CSS l’ho già spiegata nell’articolo della guida HTML “Creare un sito Web (parte 2)” secondo paragrafo.
Prendiamo come esempio questo file index.html situato nella cartella principale di un sito (esempio: www.aforismiweb.it):

 <head>
  <title>Gli aforismi migliori del Web!</title>

  <meta name="description" content="Questo sito presenta le frasi, gli aforismi
  e le citazioni piu belle riscontrabili nel Web."/>

  <meta name="keywords" content="aforismi migliori, citazioni, frasi belle da
  condividere, citazioni film"/>

  <meta name="robots" content="index,follow"/>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link href="http://www.aforismiweb.it/css/css_principale.css" rel="stylesheet" 
   type="text/css"/>
 </head>

La stringa evidenziata in blu indica al documento HTML dove andare a prendere le impostazioni grafiche CSS della pagina, e’ importante che il percorso e il nome file sia perfettamente uguale o il foglio di stile CSS non verrà trovato e quindi la pagina HTML apparirà priva di effetti grafici.
Nel prossimo articolo parleró del CSS e di ogni passaggio in modo più dettagliato e con esempi per favorirvi l’apprendimento di questo linguaggio.

Vai all’indice | Vai all’articolo successivo

Lascia un commento