Siamo arrivati alla quarta lezione e nonostante le vacanze pasquali i dolabber non sono stati con le mani in mano, così al rientro dalle ferie il docente Andrea Barghigiani aspettava impaziente di vedere i progressi fatti: i “compiti a casa” sono stati svolti e le pagine HTML stanno prendendo forma. La lezione di oggi parte con ancora più fermento.
Lo stile si chiama: CSS3.
Oggi si aggiunge stile al progetto con CSS3 (Cascading Style Sheets).
Le pagine HTML hanno sì una struttura, ma sono in bianco e nero e totalmente prive di “bellezza”: CSS3 serve proprio a dare loro lo stile!
Scrivendo in Atom, le regole CSS vanno inserite all’interno di parentesi graffe (h1 {color: red}) e ci permettono, ad esempio, di colorare il testo, di scegliere il carattere e di cambiarne la grandezza.
Le regole CSS sono davvero tantissime e non bisogna pensare di doverle ricordare tutte a memoria: per esempio, si possono utilizzare strumenti online come quelli che ci fornisce MDN, Mozilla Developer Network per averle tutte (ma proprio tutte) a portata di click: dobbiamo però conoscerne la logica e le scorciatoie.
Uno dei mantra dei programmatori è “DRY” (Don’t Repeat Yourself”), ci dice Andrea: questo è uno dei principi fondamentali di progettazione e di sviluppo, che si fonda sull’idea che andrebbe sempre evitata la ripetizione sfruttando tutte le potenzialità della macchina. Questo principio è quindi applicabile anche al momento della scrittura in CSS: un ottimo trucco per risparmiare tempo e caratteri sarà, per esempio, separare gli elementi con una semplice virgola. Per colorare di rosso gli elementi h1 e p , ad esempio, ci basterà scrivere h1, p {color: red}.
Avere una visione a blocchi con il Box Model.
Presa confidenza con le prime regole CSS, ecco che si può davvero cominciare a personalizzare i progetti: vanno però sempre applicate le utilissime “scorciatoie”, che aiutano a dimezzare i tempi di lavorazione.
“Nel web tutto è un Box o meglio un Box Model”, dice Andrea e prosegue “il CSS ci aiuta a dargli forma ma soprattutto carattere”. Prendiamo un paragrafo, ad esempio, e consideriamolo come fosse un box, un blocco: possiamo modificarne la struttura di base, regolare l’ampiezza dei suoi margini e la loro grandezza, colorare lo sfondo e aggiungervi un bordo cromatico arrotondato e/o diversamente spesso.
Il tempo vola.
I dolabber, presi dal progetto continuano a “smanettare” sui loro computer insieme ad Andrea. Le informazioni apprese sono tante e con il CSS sono anche più divertenti da applicare e da testare.
L’appuntamento è alla prossima lezione: sarà la volta di dare forma all’header e al footer.
Stay Tuned!
