Fogli di stile o CSS (Cascading Style Sheet)

I Fogli di stile (CSS)

Come funzionano i fogli di stile o CSS? quanti modi sono disponibili per associare i fogli di stile al linguaggio HTML?

I fogli di stile o CSS (Cascading Style Sheet) forniscono uno strumento che permette di formattare una pagina web, in un modo che l’HTML non consentiva. L’obiettivo del loro utilizzo è infatti quello di separare lo stile di una pagina Web dalla sua struttura, cosa possibile solo attraverso i fogli di stile. Agli albori del linguaggio HTML (versioni fino alla 3.2) venivano usate tecniche differenti per aggirare i limiti stilistici: tabelle per impaginazione ed immagini per creare effetti grafici. Il W3C (World Wide Web Consortium) pubblico alla fine del 1997 le specifiche della nuova versione HTML 4 e nel 1996 (con revisione nel 1998) le specifiche CSS. Oggi molti siti adottano gli standard HTML 5 e CSS3, che consentono un controllo ottimale del layout di un sito web.

Esistono 4 modi con cui è possibile associare i fogli di stile al linguaggio HTML. Usando :

1.un foglio di stile in linea (STYLE)

2.un foglio di stile importato usando la notazione “@import”

3.un foglio di stile incorporato (contenuto nell’elemento HEAD)

4.l’elemento LINK per collegare un foglio di stile esterno (fortemente consigliato)

Sintassi dei fogli di stile

Prima di esaminare i modi con cui è possibile associare i fogli di stile al linguaggio HTML, esaminiamo la sintassi:

selettore {proprietà1:valore; proprietà2:valore;…}

dove:

• le dichiarazioni sono inserite tra parentesi graffe { }
• al posto del segno = vengono usati i due punti : per assegnare il valore alle proprietà
• le dichiarazioni consecutive sono separate dal segno ; invece che dalla virgola ,

Fogli di stile in linea

I fogli di stile in linea agiscono su singole istanze all’interno della pagina, attraverso l’attributo STYLE. Per formattare solo una certa parte del testo, si utilizzerà l’attributo STYLE in associazione con i tag HTML <SPAN> o <DIV>.

Vediamo un esempio:

<DIV STYLE=”font-size:16px; font-family:verdana; color:green;font-weight:bold”>
Questo testo ha colore verde
</DIV>

In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag <DIV> e non per tutto il documento. In particolare abbiamo indicato come grandezza del carattere (font-size) 16 pixel; come tipo di carattere (font-family) il verdana, come colore (color) il verde e come stile il bold (font-weight). Il risultato che otteniamo é il seguente:

Questo testo ha colore verde

In alternativa a <DIV> si può utilizzare il tag <SPAN>. La differenza tra i due tag è molto semplice: <DIV> può contenere solo blocchi di elementi, mentre <SPAN> solo elementi di testo. L’utilizzo dei fogli di stile in linea, pur funzionante, va però contro quella che è la filosofia per cui sono nati i CSS, ovvero separare lo stile dai contenuti. Come vedremo per ottenere questo risultato è sempre meglio utilizzare i fogli di stile esterni.

Foglio di stile importato

Possiamo importare un foglio di stile esterno attraverso la notazione speciale @import. La sintassi generica è la seguente:

<style type=”text/css”>
@import url(stile.css);
</style>

dove URL del foglio di stile può essere relativo, come nell’esempio precedente, o assoluto, come in questo:

<style type=”text/css”>
@import url(http://www.comeguadagnareconinternet.info/stile.css);
</style>

L’enunciato @import deve apparire all’inizio del foglio di stile, prima di qualsiasi definizione. Ad esempio:

<style type=”text/css”>
@import url(stile.css)
@import url(http://www.comeguadagnareconinternet.info/stile.css)
BODY {color:red; background-color:black}
</style>

Foglio di stile incorporato

Il testo inserito tra i tag <H1> e <H2> assumerà lo stile definito tra le marcature <STYLE> e </STYLE>. Ovviamente  i fogli di stile incorporati possono essere applicati anche ad altri tag, come ad esempio <P>. Il controllo della formattazione è però applicato solo alla specifica pagina web. Se invece si vuole definire uno stile per tutto il nostro sito web, occorrerà utilizzare i fogli di stile esterni.

Fogli di stile esterni

I CSS esterni (estensione .css) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia per cui sono nati. La creazione di un foglio di stile esterno separa nettamente lo stile di una pagina web dalla sua struttura. Viene inoltre applicato all’intero sito web, per cui riduce i tempi di modifica della formattazione di un documento HTML.

Per utilizzare un CSS esterno bisognerà inserire tra i tag <HEAD>..</HEAD> il seguente codice:

<link rel=stylesheet href=”file-esterno.css” type=”text/css”>

dove:

• link identifica un file esterno al documento HTML;
• rel indica che il file collegato é un foglio di stile (stylesheet);
• href richiama il percorso del file .css esterno;
• type indica al browser il tipo di foglio di stile supportato.

L’impostazione sintatticamente corretta, utilizzata dagli autori per il collegamento a fogli di stile esterni, deve essere:

<html>
<head>
<title>Home Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<head>
<body>
<!– Contenuto del documento –>
</body>
</html>

Per creare un foglio di stile esterno è sufficiente inserire all’interno di un file di testo tutte le dichiarazioni CSS che sono necessarie a formattare le pagine del nostro sito:

body {background: black;
color: white;
font-size: 16px;
font-family: Garamond;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px}

h1, h2, h3 {color: teal;
font-family: Arial;
font-size: 36px}

p.copyright {font-family: Arial;
font-size: 12px;
font-color: white;
background: black}

warning {font-family: Arial;
font-size: 16px;
font-color: red}

e per finire salvarlo con estensione .css, caricandolo via FTP nel server che ospita il sito.