File di Stile con CSS


Perché usare i css per un sito web?

  • È possibile apportare drastici cambiamenti alla tua pagina web con poche modifiche in un unico file CSS.
  • Mantiene il vostro sito web design e contenuti originali

CSS esterno è un file che contiene solo il codice CSS e viene salvato con un “. Css” estensione del file.

Questo file CSS viene quindi fatto riferimento nel codice HTML usando <style>

Ma cosa sono i  File di Stile con CSS

Siete stanchi di scrivere centinaia di volte “<font face=Verdana size=12>”? Ma, soprattutto, vorreste poter cambiare in un colpo solo il colore di tutti quei titolini, che avete fatto azzurri ma forse stavano meglio blu? Allora forse dovete iniziare a capire come funzionano i CSS, ovvero i Cascading Style Sheet. I CSS sono l’equivalente per l’HTML del fogli stile che si è abituati a conoscere nei programmi di word processing o di impaginazione. L’uso dei fogli stile offre due grandi vantaggi.

fogli stileIl primo è la possibilità di  ccumulare in un solo comando tutta una serie di impostazioni del carattere (font, dimensione, peso, spaziatura, colore e altro) e del paragrafo (allineamento, interlinea, rientri); questo permette da una parte di formattare il testo più rapidamente, dall’altra aiuta a mantenere ordine e coerenza costringendo il grafico a stabilire stili precisi. Un ulteriore vantaggio risiede nella possibilità di cambiare i valori assegnati al foglio stile, cambiando automaticamente la formattazione di tutte le parti di testo alle quali il foglio stile era stato assegnato.

L’uso dei CSS nell’HTML ha un ulteriore vantaggio: 

quello di semplificare enormemente il codice sorgente del web e di rendere molto più leggere, e quindi più veloci da caricare, le pagine stesse. Ecco un esempio. Nella vostra pagina HTML avete una serie di titolini nel testo, che volete rendere in font Verdana, carattere grande come quello del testo e colore blu.

In HTML normale dovreste ripetere, per ogni titolino:
 <h2><font face=”Verdana,Helvetica,Arial,sans-serif”color=”#000099” size=3>Titolino</font></h2>

Usando i CSS potete definire l’aspetto che avranno i titolini una volta per tutte. Nella parte <head> del documento HTML avrete la vostra tabella degli stili, dove definirete in questo modo il tag h2:

<style>
h2 { font-weight: bold; font-size: medium; font-family: ”Verdana”,”
Helvetica”,”Arial”,sans-serif; color: #000099; }
</style>

Ora nell’HTML non dovrete fare altro che scrivere:

<h2>Titolino</h2>

 Infatti, tutte le volte che il browser incontrerà un testo racchiuso nel tag <h2> lo formatterà secondo le indicazioni che avete inserito nella tabella degli stili. Ogni singolo tag HTML può essere ridefinito nei fogli stile. Potete quindi decidere come appariranno i titoli principali della vostra pagina definendo uno stile per <h1>, o decidere che quando usate un grassetto (<b>) volete che il testo evidenziato con il peso del carattere  appaia anche in colore rosso.

Basta inserire nel CSS la riga:

b { color: #0000FF; }

 Utilizzando i CSS si possono anche fare molte cose che l’HTMLnon permette, come usare dimensioni per il testo basate sui punti o sui pixel, al posto delle sette dimensioni fissate dall’HTML. Per esempio:

h1 { font-size: 22px; }

 Questo metodo di formattazione è più preciso, ma non tutti i browser si comportano nello stesso modo fra un sistema operativo e un altro. In particolare la misurazione in pixel dovrebbe essere fissa, mentre quella in punti dovrebbe dipendere dalla risoluzione standard usata dal sistema operativo.  Ma il principio non vale sempre.

Soprattutto è necessario fare attenzione quando si usano i corpi piccoli: sotto i 10px o i 9pt è possibile che su alcuni browser il testo diventi illeggibile. Un effetto molto gradito che è possibile ottenere solo usando i CSS è il rollover sui link testuali, ovvero la possibilità di far cambiare colore a un link quando si passa con il puntatore su di esso. Per esempio:

a { color: #000099; text-decoration: none; }
a:hover { color: #0000FF; text-decoration: underline; }

 In questo caso, il testo del link appare blu scuro non sottolineato; quando vi si passa sopra con il puntatore diventa blu brillante e appare la sottilineatura. Naturalmente è possibile cambiare anche altri aspetti della formattazione del link, ma è fortemente sconsigliato agire su caratteristiche che alterino la dimensione o la lunghezza del testo (per esempio facendo diventare il link in grassetto), perché questo causa uno spostamento di tutto il testo attorno al link e disorienta il lettore.