Con qualche mese di ritardo arriva l’appuntamento n.5 con WEB DESIGN, oggi andremo a vedere ed illustrare in breve il funzionamento dei fogli di stile a cascata (CSS) utili a dare un tocco di stile e di colore alle nostre pagine.
Il CSS (sigla di Cascading Style Sheets, in italiano fogli di stile a cascata), in informatica, è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C. L’introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione o layout e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine stesse sia per gli utenti, garantendo contemporaneamente anche il riutilizzo di codice ed una sua più facile manutenzione.” – Wikipedia
In parole povere i file CSS servono a definire delle regole di stilizzazione per gli elementi presenti nella nostra pagina html, tutti i siti web posseggono delle regole di stilizzazione per rendere meglio leggibili i titoli oppure per impostare un colore ai paragrafi oppure ancora per impostare un’immagine di sfondo per l’intera pagina ecc…
Oggi vi porterò un esempio concreto di come questi fogli di stile possano essere utilizzati per trasformare l’aspetto estetico una normalissima e spoglia pagina html.
Questo non è un tutorial nel quale insegno tutte le proprietà modificabili tramite CSS (servirebbero centinaia di articoli per farlo) ma spiego come applicare le proprietà ed alcune best practices utili a scrivere del codice nel migliore dei modi. Se vuoi una infarinatura base delle principali proprietà ti link qui sotto un video che ritengo utile per familiarizzare con il CSS.
Hai visto il video? Ti senti pronto per iniziare? Non perdiamo altro tempo allora.
Passo 1: Creare una pagina HTML
Il primissimo ed altrettanto ovvio passo da fare è procurarsi una pagina HTML della quale vorremmo modificarne lo stile, io ne ho creata una molto semplice ma che racchiude diversi tipi di tag.
Come potete notare la pagina è veramente molto semplice, ho voluto replicare molto alla lontana una possibile pagina di un sito web che vende tecnologia online.
Per essere un po’ più tecnici la pagina è formata da una intestazione contenente titolo e sottotitolo del nostro sito web, rispettivamente un tag h1 ed uno h3.
Subito sotto troviamo un div contenente due elementi, uno è l’immagine dei telefoni mentre il secondo elemento è l’elenco puntato nel quale vengono illustrate le specifiche del telefono (rispettivamente tag img e tag ul).
Infine sotto abbiamo una serie di paragrafi con del testo riempitivo per aggiungere un po’ di diversità alla pagina. (tag p)
Passo 2: Creare il foglio di style
Una volta finita la creazione della nostra pagina possiamo passare a creare il file che conterrà le nostre regole CSS, è buona norma creare una directory “css” nella quale andremo a creare il file “style.css”
Come possiamo notare dalle immagini sopra avremmo una sottocartella “css” nella quale abbiamo creato il file “css”
NB. nella cartella degli stili possiamo creare quanti file css vogliamo, questa procedura è una best practice perché ci permette di scrivere del codice modulare da poter riutilizzare in progetti futuri.
Passo 3: La prima istruzione CSS
Finalmente possiamo procedere ad aprire il file “style.css” per poter iniziare a scrivere codice.
Il codice CSS segue questo schema generale: Innanzitutto va specificato il selettore dell’elemento che vogliamo stilizzare (ad esempio il tag) dopodiché tra parentesi graffe andranno inserite tutte le proprietà valide per tale elemento.
Più facile a farsi che a dirsi, passiamo ad un esempio pratico: mettiamo caso che io voglia colorare di rosso il titolo del mio sito (tag h1), quello che andrò a fare sarà semplicemente scrivere:
Ora possiamo salvare i nostri file, aprire la pagina nel browser e… NULLA è cambiato!
Passo 4: Collegare il file alla nostra pagina
Non preoccupiamoci troppo, non è cambiato nulla nella visualizzazione della nostra pagina semplicemente perché non abbiamo mai specificato da nessuna parte che quest’ultima debba leggere le regole dal nostro file CSS, dobbiamo quindi mettere in collegamento i nostri due file.
Per farlo è semplicissimo, ci basta scrivere nell’head della nostra pagina HTML la seguente porzione di codice
<link href=”css/style.css” rel=”stylesheet”>
Così facendo abbiamo detto alla nostra pagina di andare a leggersi le istruzioni per lo stile nel nostro file CSS.
Adesso finalmente possiamo aggiornare la pagina nel browser e… MAGIA!!
Il titolo è diventato rosso proprio come noi avevamo definito nel file CSS, questo significa che l’importazione è avvenuta con successo e seguendo una logica simile possiamo procedere a stilizzare un po’ tutti gli altri elementi
Passo 5: Avanti tutta con lo stile
Ho aggiunto ulteriori regole al mio file CSS per rendere la pagina più gradevole agli occhi dell’utente finale che andrà a guardare il sito.
Il risultato ottenuto con così poche righe di codice ci fa capire la potenza del CSS.
Passo 6: Best Practices
Alcune piccole considerazione su ciò che abbiamo appena visto, nell’esempio ho utilizzato come selettore per lo stile il nome del tag ma mettiamo caso che io voglia inserire un nuovo titolo ma anziché rosso io voglia farlo giallo, in questo caso dovrei utilizzare le classi HTML o gli id per fare riferimento al corretto elemento da stilizzare.
Aggiunta titolo giallo tramite classe
HTML: <h1 class=”yellow-title”>Titolo giallo</h1>
CSS: .yellow-title {color: yellow}
In questo caso l’utilizzo di una classe mi permette di identificare correttamente il titolo giallo, la classe è applicabile a molti elementi e stilizzerà tutti quanti secondo le sue regole, per cui posso avere infiniti elementi ai quali applicherò la classe yellow-title.
Nel caso avessimo un elemento univoco nella nostra pagina sarebbe buona norma identificarlo attraverso l’id
Aggiunta titolo giallo tramite id
HTML: <h1 id=”yellow-title”>Titolo giallo</h1>
CSS: #yellow-title {color: yellow}
Anche questo articolo è giunto alla fine, spero sia stato utile e come sempre per ogni dubbio o chiarimento non esitare a contattarmi 🙂
0 commenti