Guida al CSS - I fogli di stile CSS

Indice dei contenuti

In questa guida spiegherò come rendere migliore l’estetica delle proprie pagine web attraverso l’utilizzo dei fogli di stile CSS.

Infatti il solo HTML per creare un sito web non basta, perché quest’ultimo si limita alla sola struttura ed al contenuto. Ma dal momento in cui dobbiamo mettere mano sull’estetica del sito, qui sopraggiunge il CSS.

Per riassumere, Le regole di stile CSS non sono altro che informazioni sullo stile di una pagina web, e questo linguaggio va “a braccetto” con l’HTML. L’uno è dipendente dall’altro.

Realmente, più che linguaggio di programmazione, potremmo dire che il CSS serve a creare regole di stile, cioè sequenze di istruzioni sullo stile e comportamento dei singoli oggetti presenti in una pagina HTML.

Ma come si usa il CSS?

Gli stili CSS possono essere usati direttamente in una pagina html attraverso l’attributo style=”” o il tag <style>, oppure creando appositamente un foglio di stile .css con le istruzioni, che poi verrà richiamato come risorsa esterna nella pagina .html.

L’attributo style=”;”

Nel primo caso, per aggiungere regole di stile direttamente alla pagina html, dovremo utilizzare l’attributo style=””. Questo è il metodo più rapido solo nel caso in cui richiediamo regole di stile a dei singoli tag, e non ad un’intera pagina.

Questo attributo richiama il CSS all’interno del tag, e si può applicare a (quasi) tutti i tag ed oggetti HTML.

Per fare un esempio:

<h1 style="...;"> Titolo </h1> 
<p style="...;"> paragrafo </p>

<!-- al posto di ... andranno inserite le proprietà, come il colore, dimensioni, ecc -->

All’interno delle virgolette vanno inserite tutte le proprietà dell’oggetto, ed ogni proprietà è separata dal punto e virgola (;).

Restando sullo stesso esempio:

<h1 style="color:red; font-size:40px;"> Titolo grande, colore rosso </h1>
<p style="color:green;"> testo verde </p>

Per riassumere quindi: la sintassi è questa:

<tag style="proprietà:valore; proprietà:valore;"> </tag>

Usare i fogli di stile

Utilizzare dei fogli di stile CSS appositamente creati è il metodo miglior per diversi motivi: Ci consente di tenere tutte le regole di stile nello stesso posto in modo più ordinato; e possiamo creare delle classi e ID ed alleggerire il carico di codice sulla pagina HTML.

Prima di tutto va creato un file con l’estensione .css ed al suo interno inseriremo le istruzioni necessarie. Poi richiameremo il file .css come risorsa esterna all’interno della pagina HTML (leggi come fare).

Non utilizzeremo l’attributo style=””, perché è valido solo all’interno di una pagina .html.

La sintassi da utilizzare è questa:

h1 {
color:red;
font-size:40px;
}

p {
color:green;
}

Il risultato è sempre lo stesso del precedente, ma scritto in maniera differente.

Le proprietà vanno inserite tra due parentesi graffe { … } e vanno sempre separate dal punto e virgola.

Dichiarando proprietà direttamente su un tipo di oggetto o tag (come nell’esempio precedente: h1 o p) le regole CSS si applicheranno su tutti quei tag nella pagina. Per applicarle singolarmente dovremo utilizzare dei selettori Classe o ID.

CSS in <head>

Altro metodo per determinare lo stile degli oggetti utilizzando il linguaggio CSS è scrivere le regole inserendole all’interno dell’head della pagina web attraverso il tag <style>.

La scrittura del codice è la stessa della precedente: basterà inserire le istruzioni di un oggetto all’interno delle parentesi graffe ma alla fine chiudere tutto con il tag </style>, in questo modo:

<head>
   <style>
     div {
       height: 300 px;
       width: 400 px;
     }
 </style>
<head>

In questo modo otterremo un codice più ordinato direttamente all’interno di una pagina HTML senza dover richiamare risorse esterne.

Style=”” o fogli di stile? Che differenza c’è?

Con questi metodi si ottengono gli stessi risultati. La differenza è come dovrà essere gestito il codice dalla pagina web:

Utilizzando style=”” si aggiungono le regole di stile direttamente nella pagina .html, questo consente aggiunte rapide e mirate a singoli tag, ma aumenterà la dimensione finale della pagina stessa.

I fogli di stile CSS sono la scelta migliore, poiché consentono una gestione migliore e mantengono un ordine preciso di tutte le regole create, poiché possono essere inserite tutte in un unico file e richiamate per tutte le pagine presenti nel sito contemporaneamente.

Infine, utilizando <style> nel tag <head>, sarà più semplice gestire il codice direttamente nella pagina rispetto a all’utilizzo dell’attributo style=””, ma potrebbe portare a confondersi nella scrittura e lettura di file con un’elevata quantità di codici e regole

Questi sono i concetti base su come utilizzare gli stili CSS. Ora basterà imparare le differenti proprietà ed i valori da inserire per poter realizzare uno splendido sito web.

Esercitati con il CSS e HTML tramite il nostro editor di codice online!

Continua con: Come creare un file .css