Home + Webmaster + Servizi utili + Manuali + Manuale CSS + Implementare il codice CSS

Implementare il codice CSS

Conclusi i doverosi cenni preliminari sui CSS, passiamo subito all'atto pratico, vediamo come e dove e perchè applicare il codice ad una pagina o ad una serie di pagine Web.

Il codice CSS può essere implementato in tre diversi modi a seconda delle esigenze:

1. direttamente su di un elemento Html
2. nell'header della pagina
3. in un file esterno con estensione .css

Esaminiamo nel dettaglio questa tre categorie, dette rispettivamente fogli di stile incorporati, fogli di stile interni ed in fine fogli di stile esterni.


Fogli di stile incorporati

Questa pratica è in genere la meno usata, dato che finisce per equivalere al normale metodo di formattazione Html, anche se conserva la potenza e la versatilità dei CSS rispetto all'Html, ma può tornare utile per formattare un singolo elemento che, per necessità, deve essere diverso dai suoi simili, già definiti in un foglio di stile globale (interni, esterni).

Si utilizza l'attributo Html style all'interno del Tag che si intende formattare con quel criterio, ecco un esempio:

<div style="color: #FF0000;">Questo testo apparirà in rosso</div>

Al momento non ci si preoccupi della sintassi che potrebbe non risultare del tutto chiara o immediata, nel corso delle lezioni successive saranno ampiamente spiegate tutte le forme sintattiche CSS e tutti i possibili comandi da utilizzare.


Fogli di stile interni

Questo metodo è più utilizzato ma non ancora ottimale, consiste nell'inserire un blocco di stile all'interno dell'header della pagina, definendo un unico stile per i singoli elementi contenuti, i Tag di testo, i link, le tabelle, ecc.

Si utilizza il Tag <style> e </style> con l'attributo opzionale (io personalmente lo utilizzo...) type="text/CSS".

Un esempio servirà a chiarire le idee:

<html>
   <head>
      <title>Il mio primo foglio di stile</title>
      <style type="text/CSS">
         div { color: #FF0000; font-family: Verdana; }
         a { color: #3366CC; text-decoration: None; }
      </style>
   </head>
<body>

<div>Testo formattato con i CSS</div>
<a href="#">Link formattato con i CSS</a>

</body>
</html>

Fogli di stile esterni

Terza modalità di utilizzo dei CSS, senza dubbio la più efficace, è rappresentata dall'inclusione di un file esterno con estensione .CSS, salvato come Tutti i file [*.*].

La stringa di codice che si utilizza per richiamare il file esterno nella pagina, ad esempio style.CSS è la seguente:

<link rel="stylesheet" type="text/CSS" href="style.CSS">

nel caso il file si trovi nella stessa cartella del file Html che lo richiama, se invece si trovasse nella cartella stili la stringa sarebbe la seguente: 

<link rel="stylesheet" type="text/CSS" href="stili/style.CSS">

Questo metodo è senza il migliore perchè rende possibile richiamare il file di stile in ogni pagina ottenendo ovunque l'effetto stilistico progettato nel file esterno, e li dove dovesse essere apportato un cambiamento globale ad una tipologia di elementi, ad esempio il colore dei link, è possibile cambiare lo stile ovunque con una sola mossa.

Ultima nota, nel file esterno non bisogna utilizzare i Tag <style> e </style>, ma solo codice CSS.

Autore: Luca Ruggiero