Fogli di stile CSS

Affronteremo oggi i fogli di stile CSS, utilissimi per dare una formattazione gradevole alle nostre pagine web.

Da dove deriva il termine CSS?

CSS deriva da cascading style sheet,ovvero fogli di stile a cascata. L’ultima versione è la tre, quindi nella presente guida faremo riferimento ai CSS3.

Perché dobbiamo conoscere i fogli di stile CSS?

Perché anche se oggi esistono tanti CMS gratuiti che consentono di costruire siti web funzionali, è sempre opportuno poter fare delle modifiche al codice per personalizzare un sito web come si desidera.

Quindi mentre con l’HTML si crea la struttura della pagina, con i CSS si dà un layout.


Modalità di inserimento dei fogli di stile

Ci sono tre modalità di inserimento dei CSS in una pagina web

1. Fogli esterni

2. Fogli incorporati

3. Fogli in linea

CSS esterni

I fogli di stile esterni si creano in un foglio a parte e nella relativa pagina html si inserisce il collegamento al foglio creato, dopi il tag <head> e prima della sua chiusura </head>.

Quindi per collegarlo si utilizza il tag <link …/> con i suoi 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 utilizzarli?

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ì.

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 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 vengono aggiunti direttamente all’interno del tag <head> prima della sua chiusura </head>. Presentano la stessa sintassi dei CSS esterni che affronteremo nei prossimi articoli.
Se ci sono le stesse dichiarazioni presenti in un CSS esterno prevalgono quelle del suo CSS interno.

Vengono utilizzati solo 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 carattere verdana, dimensione del carattere 16 pixel e colore grigio.

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

Alcuni link utili:

Tag semantici

Form in html

Tag strong ed em

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *