Fogli di stile CSS, uso dei fogli di stile in una pagina html

Parliamo dei fogli di stile CSS e come inserirli nelle nostre pagine web tramite degli esempi pratici.

Fogli di stile CSS esterni

I fogli di stile esterni si creano come un documento a parte, rispetto alla pagina html.

Dopo, nella pagina html, si aggiunge il collegamento al foglio di stile.

Dunque occorre inserire, dopo il tag <head> e prima della sua chiusura </head>, il tag <link> assieme ad alcuni attributi:

href definisce il percorso del file .css; se si trova in una sotto-cartella si deve indicare il percorso corretto.

rel stabilisce il tipo di associazione tra la pagina web e il css.

type indica il tipo di documento.

media indica il tipo di dispositivo, ad esempio screen per indicare tutti i dispositivi dotati di monitor (video). Più avanti parleremo nello specifico delle media query, importantissime per rendere un sito web responsive, in quanto riconoscono le dimensioni e l’orientamento di un dispositivo. Altri possibili valori possono essere: media=”all”: sta ad indicare tutti i dispositivi; media=”print”: indica tutti i dispositivi per la stampa; media=”speech”: indica i dispositivi per il riconoscimento dei caratteri ovvero gli screenreader.

Ecco un esempio di come incorporare i fogli di stile CSS:

<head> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
...
</head>

Osserviamo l’uso della barra / per chiudere il tag link.

Quando conviene utilizzare i fogli di stile esterni?

Sicuramente quando creiamo un foglio di stile che deve essere associato a tutte le pagine del nostro sito web e nella maggior parte dei casi è così.

Fogli di stile CSS in linea

I CSS in linea invece sono utili quando si deve dare la formattazione solo ad una determinata porzione di codice.

Ad esempio un utilizzo dei css in linea, inserito nel tag p, può essere questo:

<p style=\”padding-left: 40px;\”>Il blog coding creativo nasce per condividere articoli sul coding</p>

Chiaramente se è una regola, che devo usare spesso, conviene incorporarla nel foglio di stile esterno, in modo da poterla riutilizzare.

L’uso dei CSS in linea non è molto consigliato, conviene utilizzarli quando strettamente necessario.

CSS incorporati

I CSS incorporati o interni vengono aggiunti direttamente all’interno del tag <head> prima della sua chiusura di </head>. Presentano la stessa sintassi dei CSS esterni che approfondiremo nei prossimi articoli.

Se ci sono le stesse dichiarazioni presenti in un CSS esterno prevalgono quelle del suo CSS interno.

Vengono utilizzati principalmente per includere quel codice che serve ad aumentare la velocità di caricamento della pagina web.

Esempio di CSS incorporato:

<head>
...
<style type="text/css">
   h1 {
    font-family: verdana, geneva, sans serif;
    font-size: 16px; 
    color: #ccc;
    }
...
</style>
...
</head>

L’impostazione appena descritta assegna ad h1 il font verdana con dimensione di 16 pixel e colore grigio.

Chiaramente ho proposto dei semplici esempi d’uso dei fogli di stile CSS, più avanti tratteremo ancora questo argomento.

Lezione precedente: introduzione ai CSS

Lezione successiva: fogli di stile esterni