Per parlare di CSS partiremo dal fondo, come implementare in una pagina HTML un CSS già pronto. Questo risulta fondamentale per poter provare il CSS nelle varie fasi del suo sviluppo ed eventualmente correggere il tiro.

I CSS normalmente vengono suddivisi in due grosse categorie:

Per CSS esterni si intendono veri e propri file esterni alla pagina HTML caratterizzati dall'estensione .css.

Per CSS interni, invece, si intendono insiemi di stringhe inglobate nella pagina HTML stessa.

Nel caso si voglia modificare lo stile di tutte le pagine del nostro sito, risulterà utile utilizzare i fogli di stile esterni, mentre nel caso in cui si voglia modificare un solo elemento (o comunque pochi) di qualche pagina è consigliato un CSS interno. Vedremo più avanti come utilizzarli contemporaneamente e in quali casi.

Ipotizziamo quindi di aver già scritto il nostro CSS, come implementarlo nelle nostra pagine HTML?

Nel caso di un CSS esterno basterà richiamarlo tramite il tag <link> nel seguente modo:

Nel quale notiamo subito gli attributi:

rel: valore fisso per i CSS e sempre necessario

type:valore fisso per i CSS e sempre necessari

href:indica il percorso assoluto o relativo dove trovare il nostro foglio di stile (nell'esempio il CSS si chiama foglio_stile.css e si trova nella root del sito)

Questo codice deve essere inserito all'interno del tag head!

Nel caso di un CSS interno basterà richiamarlo tramite il tag <style> nel seguente modo:

Come per i CSS esterni, l'attributo type è obbligatorio e risulta essere sempre “text/css”.

Anche in questo caso il codice deve essere tassativamente inserito all'interno del tag head!

Esiste un ultimo modo per usare i CSS e a dir la verità non ci piace tanto, la modalità in linea. In questa maniera applichiamo praticamente le modifiche a un solo elemento a nostra scelta tramite l'ausilio dell'attributo (nota: attributo, non tag) style .

Ad esempio volendo modificare il testo contenuto in un paragrafo andremo a scrivere:

<< Pagina Precedente|Menù guida HTML|Pagina successiva >>