Fogli di stile CSS: cosa sono e come applicarli

09 Luglio 2017 8 minuti di lettura

...anche a documenti HTML già esistenti, per lavorare sempre meno!

Cosa sono i fogli di stile CSS e come si possono applicare a un documento HTML? Lo scopo di questo articolo è di spiegare con semplicità questi utilissimi codici facendo qualche esempio.

Impareremo tre modi diversi di assegnare i CSS agli oggetti (testi, immagini, ecc...) contenuti in una pagina HTML, ciascuno con i suoi pro e i suoi contro.

Per farlo partiamo questa semplice pagina HTML:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

  </head>

  <body>

    <h1>Titolo della pagina</h1>

    <h2>Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>

    <h2>Paragrafo 2</h2>

    <p>Testo paragrafo 2</p>

  </body>

</html>

Cosa sono i CSS

L'acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata).

I CSS permettono di modificare il formato, l'aspetto di un elemento HTML e se opportunamente configurati, ci permettono di applicare al nostro intero sito degli stili senza dover andare a modificare il codice in ogni singola pagina.

Per esempio, se abbiamo inizialmente deciso che tutti gli header <h1> devono apparire in colore ROSSO e poi cambiamo idea e li vogliamo BLU, è possibile fare in modo che sia sufficiente modificare una sola riga in un unico file per ottenere questo risultato su tutto il sito, senza andare a toccare le pagine HTML già scritte.

Ma procediamo per gradi...

Ann.

Maggiori informazioni sui canali delle offerte Amazon...

Ann.

Le tre diverse modalità

Come accennato nell'introduzione, esistono tre modi per applicare i CSS a un documento HTML:

Stile "in linea"
Fogli di stile interni
Fogli di stile esterni

Lo stile in linea

Lo stile "in linea" è uno stile applicato direttamente all'elemento HTML che vogliamo formattare.

Se, per esempio, vogliamo fare in modo che l'elemento <h1> nel nostro documento esempio2.html appaia in colore rosso modificheremo il codice inserendo style="color: #ff0000;" all'interno del tag <h1>, subito dopo <h1 e prima della chiusura del tag (>), in questo modo:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

  </head>

  <body>

    <h1 style="color: #ff0000;">Titolo della pagina</h1>

    <h2>Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>
	
    <h2>Paragrafo 2</h2>

    <p>Testo paragrafo 2</p>
	
  </body>

</html>

Così facendo otterremo questo risultato:

Titolo della pagina

Allo stesso modo, volendo cambiare il colore degli elementi <h2> in blu, potremo modificare il codice così:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

  </head>

  <body>

    <h1 style="color: #ff0000;">Titolo della pagina</h1>

    <h2 style="color: #0000ff;">Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>

    <h2 style="color: #0000ff;">Paragrafo 2</h2>

    <p>Testo paragrafo 2</p>

  </body>

</html>

Ecco il risultato:

Titolo della pagina

Paragrafo 1

Testo paragrafo 1

Paragrafo 2

Come puoi renderti conto, pur funzionando perfettamente, questo metodo è poco pratico quando, per esempio, desidero formattare allo stesso modo decine di elementi simili come, per esempio, i paragrafi che possono essere tantissimi all'interno di una pagina HTML.

Ecco che ci vengono in aiuto i fogli di stile interni, cioè l'associazione di uno stile o gruppo di stili a un elemento HTML.

I fogli di stile "interni"

Partendo dall'esempio precedente, volendo far diventare di colore ciano il testo dei paragrafi, mi sarà sufficiente definire all'interno della sezione <head></head> del documento HTML una sezione <style>codici css...</style>. Così:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

    <style>

      p {color: #00ffff;}

    </style>

  </head>

  <body>

    <h1 style="color: #ff0000;">Titolo della pagina</h1>

    <h2 style="color: #0000ff;">Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>

    <h2 style="color: #0000ff;">Paragrafo 2</h2>

    <p>Testo paragrafo 2</p>

  </body>

</html>

In questo modo ho stabilito che tutti i paragrafi, delimitati dai tag <p> </p> avranno il colore esadecimale #00ffff, cioè ciano. Il risultato è questo:

Titolo della pagina

Paragrafo 1

Testo paragrafo 1

Paragrafo 2

Testo paragrafo 2

Ovviamente possiamo fare la stessa cosa con i tag h1 e h2 ottenendo lo stesso risultato:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

    <style>

      p {color: #00ffff;}

      h1 {color: #ff0000;}

      h2 {color: #0000ff;}

    </style>

  </head>

  <body>

    <h1>Titolo della pagina</h1>

    <h2>Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>
	
    <h2>Paragrafo 2</h2>

    <p>Testo paragrafo 2</p>
	
  </body>

</html>

Ma le potenzialità di questo metodo non finiscono qui: se, per esempio, volessimo formattare gli oggetti in modo diverso, anche se sono dello stesso tipo (due paragrafi di colore diverso, per esempio), possiamo utilizzare le classi.

Una classe, in pratica, definisce un gruppo di stili da applicare a un elemento HTML.

Facendo riferimento all'esempio precedente, dichiariamo la classe sfondogiallo alla sezione <style> preceduta da un punto (.) e poi aggiungiamo al secondo paragrafo la classe con la stringa <p class="sfondogiallo">Testo paragrafo 2</p>:


<!DOCTYPE html>

<html>

  <head>


    <title>Pagina esempio</title>

    <style>

      p {color: #00ffff;}

      h1 {color: #ff0000;}

      h2 {color: #0000ff;}

      .sfondogiallo {background-color: #ffff00;}

    </style>

  </head>

  <body>

    <h1>Titolo della pagina</h1>

    <h2>Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>
	
    <h2>Paragrafo 2</h2>

    <p class="sfondogiallo">Testo paragrafo 2</p>
	
  </body>

</html>

Come possiamo vedere il secondo paragrafo ha mantenuto lo stile dichiarato per tutti i paragrafi ma soltanto lui ha "ereditato" lo stile della classe .sfondogiallo, che attribuisce allo sfondo un colore giallo:

Titolo della pagina

Paragrafo 1

Testo paragrafo 1

Paragrafo 2

Testo paragrafo 2

Come puoi facilmente intuire in questo modo è possibile modificare contemporaneamente tutti gli stili dell'intera pagina HTML semplicemente modificando i codici all'interno della sezione <style></style>.

Ma come si può ottenere lo stesso vantaggio per tutte le pagine HTML di un intero sito?

È molto semplice: si ricorre all'utilizzo dei fogli di stile esterni.

I fogli di stile "esterni"

In pratica non si fa altro che scrivere lo stesso codice finora utilizzato nella sezione <style></style> in un file esterno che chiameremo, per esempio, esempio.css. Il contenuto di questo file sarà:


p {

  color: #00ffff;

}

h1 {

  color: #ff0000;

}

h2 {

  color: #0000ff;

}

.sfondogiallo {

  background-color: #ffff00;

}

Nella sezione head del nostro documento HTML sostituiremo il codice css con un collegamento al file appena creato, in questo modo:


<!DOCTYPE html>

<html>

  <head>

    <title>Pagina esempio</title>

    <link href="esempio.css" rel="stylesheet" type="text/css">

  </head>

  <body>

    <h1>Titolo della pagina</h1>

    <h2>Paragrafo 1</h2>

    <p>Testo paragrafo 1</p>

    <h2>Paragrafo 2</h2>

    <p class="sfondogiallo">Testo paragrafo 2</p>
	
  </body>

</html>

Inserendo il comando <link href="esempio.css" rel="stylesheet" type="text/css"> in tutti i file HTML che compongono il nostro Sito Web potremo modificare gli stili dell'intero sito semplicemente modificando il file esempio.css.

Comodo, vero?

Ovviamente il file esempio.css dovrà essere messo nella stessa cartella del file .html, altrimenti sarà necessario specificare il percorso nella riga <link href="/percorso/del/file/esempio.css" rel="stylesheet" type="text/css">.

Conclusioni

Abbiamo visto com'è possibile formattare i contenuti di una pagina o di un intero Sito Web, tramite l'utilizzo dei CSS. Ma i CSS possono fare molto, molto di più!

Esercitati facendo qualche modifica da solo e vedrai che, una volta provati i CSS, non li lascerai più e ti verrà voglia di approfondirne la conoscenza!

Fabio Donna

Vuoi un libro sul CSS?

Articoli correlati: Codici colore HTML+CSS ● Testi e immagini con HTML e CSS

Ann.

Philips Monitors Philips 346E2CUAE/00 Monitor 34" VA WLED 3440 x 1440 HDMI/DP Curved, Nero, 34"

Gaming Monitor Curvo da 34" dotato di pannello VA in formato Ultrawide con risoluzione 3440*1440
Fast Response Time da 1ms con refresh rate da 100Hz per giocare con ottima fluidità
Dotato di connessione USB-C che permette di alimentare il tuo Notebook e di trasferire il segnale Video, Audio e dati tramite un unico cavo
Grazie alla funzionalità Multiview puoi collegare 2 sorgenti al monitor e visualizzarle contemporaneamente in modalità PiP o PbP
Il monitor può essere regolato in altezza per avere una visione ottimale inoltre è dotato di predisposizione VESA per poterlo appendere a parete

305,96 €