In questo semplice tutorial sui CSS (Cascading Style Sheets), impareremo ad utilizzare i fogli di stile per dare una piacevole formattazione ad una pagina web.
Le regole per creare i CSS sono state stabilite dal W3C a partire dal 1996 in cui è stata lanciata la versione numero 1. Nel 1998 si è passati alla versione CSS2 con notevoli modifiche rispetto a quella precedente dando soprattutto un controllo maggiore sui pixel che la versione precedente doveva integrare con altri programmi.
Dopo si è passati alla versione 3, ormai supportata su tutti i browser. Questa versione si è incentrata sul concetto di modularità che ne ha agevolato l’uso.
Tra le altre cose, in quest’ultima versione, troviamo nuovi selettori e nuove proprietà per gestire i colori e per la trasparenza. Si è aggiunta la possibilità di aggiungere font diversi da quelli prestabiliti. Inoltre si sono aggiunte anche le proprietà che consentono di gestire gli effetti dinamici come le transizioni e le animazioni.
La novità più importante è stata quella delle media queries per lo sviluppo di siti web responsive.
Dunque, in questa guida impareremo passo passo a creare dei layout correttamente visibili su tutti i dispositivi, dal desktop al mobile.
Ecco un pratico manuale grauito sui CSS:
Tutorial CSS
Il CSS serve dunque a separare il contenuto di una pagina dalla sua formattazione. In origine l’HTML offriva dei metodi per formattare la pagina, utilizzando gli attributi direttamente all’interno dei tag. Questa pratica oggi è fortemente sconsigliata, oltre che deprecata.
Un’altra abitudine comune era quella di utilizzare le tabelle per la creazione dei layout, adesso le tabelle si utilizzano solo per dati strettamente tabellari, come ad esempio prezziari, dati statistici, ecc.
In questo tutorial CSS partiremo da un livello base, proponendo le regole fondamentali per creare una semplice pagina web, per poi passare ad un livello avanzato, creando sistemi per siti web responsive.
Fatta questa premessa passiamo adesso allo sviluppo dei nostri layout proseguendo con la prossima lezione, nella quale introdurremo i metodi per poter includere un foglio di stile nelle pagine web.
Alcuni link utili
Introduzione a flexbox e proprietà box genitore, display:flex
Quali sono le proprietà dei box flessibili
Come utilizzare flex-direction
Impostare la proprietà flex-wrap