loader gif

HTML e fogli di stile (CSS)

Premessa

L’HTML e il CSS sono due linguaggi diversi ma che lavorano a stretto contatto. L’HTML è un linguaggio di markup che viene utilizzato per strutturare le informazioni contenute in una pagina Web, mentre il CSS (Cascading Style Sheet) è un linguaggio che definisce lo stile della pagina (sfondi, colori, immagini, font).

Perchè questa “collaborazione” tra HTML e CSS?

In origine l’HTML è nato come linguaggio per formattare documenti presenti sul Web. Con l’evolversi del Web si è però presentato un “problema”.
Ipotizziamo di avere 10 pagine Web dove troviamo scritto “Ciao e benvenuto” in rosso, ossia:

  <font color="red">
   Ciao e benvenuto
  </font>

Per cambiare il colore del testo da rosso a giallo in tutte le 10 pagine dovremmo andare a modificare il contenuto di ogni singola pagina Web e cambiare ‘red’ con ‘yellow’ (1 modifica per ogni pagina, quindi 10 modifiche) come segue:

  <font color="yellow">
   Ciao e benvenuto
  </font>

Il che comporterebbe una perdita di tempo inutile.
Se questa operazione non comporta difficoltà su una singola pagina, diventa palesemente insostenibile (o difficoltosa) su siti molto grandi, a volte di centinaia di pagine.
Così nasce l’esigenza di separare il contenuto dalla formattazione, cioè separare il contenuto ‘Ciao e benvenuto’ dalla formattazione ‘’.

I fogli di stile (CSS)

Il contenuto della pagina HTML vista pocanzi diventerebbe qualcosa del genere in tutte le 10 pagine:

  <p class="FormattaTesto">
   Ciao e benvenuto
  </p>

La colorazione del testo verrebbe affidata alla classe “FormattaTesto”, DESCRITTA SU UN FILE SEPARATO CON ESTENSIONE “.css”. Dunque basta editare la classe “FormattaTesto” sul file .css per cambiare l’aspetto del testo ‘Ciao e benvenuto’ in tutte le 10 pagine.
Ovviamente bisogna inserire nel documento HTML un link che collega il foglio di stile CSS con la pagina HTML che vedremo prossimamente con la guida CSS.
Alcuni esempi che stiamo trattando in questa guida non sono espressi nella maniera più elegante, alcuni elementi descritti nella guida infatti sono addirittura “deprecati” dal W3C, cioè stanno cadendo in disuso (come il tag <font>).
Questa guida tiene in considerazione da subito il lavorare utilizzando i linguaggi HTML e CSS in modo da rendere più agevole il passaggio da una formattazione inserita nel codice HTML a una formattazione che utilizzi i fogli di stile. Man mano che comincerete a costruire siti web, sentirete l’esigenza di passare a una formattazione avanzata.
Le due cose tuttavia non vanno sentite in contrapposizione: i fogli di stile sono un arricchimento del codice HTML e non è possibile apprendere i fogli di stile senza conoscere il codice HTML.

Benefici del CSS

I CSS sono stati una rivoluzione nel mondo del web design. I suoi benefici comprendono:

  • Il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
  • Un controllo molto più preciso e omogeneo del layout;
  • L’applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.), responsive-design;
  • Un gran numero di tecniche avanzate e sofisticate per la gestione della grafica.

Vai all’articolo precedente | Vai all’indice | Vai all’articolo successivo

Lascia un commento