Come imparare a scrivere in CSS – tutorial per principianti

Ho deciso di scrivere questo articolo perché quando ho imparato ad utilizzare il CSS ho trovato moltissime fonti teoriche sul web, ma poche pratiche, che mi consentissero davvero di capire come usarlo.

Il CSS è un linguaggio informatico utilizzato all’interno dei siti web, che facilita la modifica grafica (front-end) degli stessi.
Si tratta di una semplificazione dell’HTML, quindi l’obiettivo del CSS è proprio quello di facilitare la vita ai web designer e a tutti coloro che non hanno delle competenze informatiche specifiche.
Per fare un esempio sull’importanza del CSS, se vuoi cambiare qualcosa di grafico all’interno del tuo sito, ma non trovi un’opzione che te lo consenta, puoi usare il CSS. Su una piattaforma di self-hosting il suo utilizzo è gratuito, mentre su WordPress.com si può sbloccare solamente con certi piani a pagamento.

In molti non sanno che il CSS è già presente all’interno del proprio sito web, dipende dal tema utilizzato. Alcuni temi sono pesanti e hanno un CSS complesso, che vi consiglio di evitare. Come fare a scoprire il CSS di un tema? Basta aprire l’homepage del proprio sito su Google e cliccare con il tasto destro su un qualsiasi punto della pagina. Dopodiché, vi basterà cliccare su Ispeziona e scoprirete così l’aspetto del vostro sito web in HTML e in CSS. Pertanto, il CSS è già presente, come ho detto, sul sito. Vi basterà modificare ciò che è già presente, senza imparare per forza tutta la teoria che sta dietro all’utilizzo del CSS.
Certo, studiare la teoria è utilissimo ed essenziale per chi come me lavora con i siti web. Tuttavia, se il web design non è il vostro lavoro, vi basterà seguire le istruzioni che troverete sotto, per imparare a scrivere in CSS. Inoltre, dopo di queste troverete il video tutorial dove vi spiego dettagliatamente come si usa il CSS, dandovi diversi consigli.

Come anticipato, la prima cosa che dovete fare è aprire il vostro sito web in una qualsiasi finestra di Google e cliccare sul tasto destro. Cliccando poi su Ispeziona, si aprirà una finestra sulla destra, una sorta di codice infinito di cui non capirete niente. Non preoccupatevi, non vi servirà sapere leggere una riga di quello che vedrete.
Ciò che dovete fare è cliccare sul pulsante in alto a sinistra (della finestra) che dice: “Select an element in this page to inspect it”. Se proprio non trovate il pulsante, potete premere la seguente combinazione di tasti: Ctrl + Shift + C.
Fatto questo, il selettore sarà attivo e vedrete che spostando il mouse all’interno del vostro sito si coloreranno degli elementi. Il vostro obiettivo è quello di selezionare l’elemento che volete modificare, cliccandoci sopra.
Mi raccomando, selezionate esattamente l’elemento che volete modificare. Ad esempio, è diverso selezionare un’immagine, rispetto al contenitore che la contiene. Se volete modificare la dimensione dell’immagine, selezionate solamente quella. Se invece volete cambiare l’aspetto dello spazio che la circonda, selezionate il contenitore. La parte più difficile di questa procedura è proprio quella di capire che cosa bisogna modificare per ottenere un determinato risultato. Per questo motivo vi consiglio di modificare il sito prima attraverso questa funzione di Ispeziona, cambiando i valori all’interno della sezione “Styles” e dopo copiare il CSS che vi serve, sul sito.
Ora che sappiamo come selezionare un elemento, vi devo dare almeno due dritte sulla teoria del CSS.
Intanto, la prima cosa da fare è trovare il selettore per scrivere il comando in CSS. Appena sopra la sezione Styles, troverete proprio i selettori. Possono essere pochi, tanti, dipende dalla sezione. Ciò che dovete fare consiste nel copiare il nome del selettore ed inserirlo all’interno del CSS aggiuntivo del vostro sito. Mi raccomando, copiate il nome per interno del selettore, anche se è molto lungo o ha degli strani caratteri.
I selettori possono essere preceduti da un punto, da un asterisco, oppure non hanno niente davanti alla scritta.
Trovato il selettore, non vi resta che scrivere il comando CSS. Per farlo, occorre scorrere nella colonna sinistra sotto a Styles. Lì troverete tutto il CSS relativo al selettore. Modificandolo direttamente sul sito, potrete vedere cosa cambia nella pratica. Si tratta di una procedura davvero semplice, potete sbizzarrirvi a cambiare i numeri o i comandi.
Per tradurre questa cosa nella pratica, vi basterà copiare la riga di CSS che vi interessa, ad esempio, quella relativa al colore di un oggetto e copiarla di fianco al selettore che avete precedentemente aggiunto nel CSS aggiuntivo del vostro sito.
Ad esempio,
.site-description {
color: yellow;
}
In questo caso abbiamo il selettore .site-description, l’inizio del comando che è la parentesi graffa (si scrive premendo contemporaneamente alt gr + Shift + parentesi quadra) e infine abbiamo il comando stesso, che consiste nelle seguenti parti: il comando (proprietà) che è color, in questo caso, il quale deve essere sempre seguito dai due punti. Poi segue la personalizzazione del comando, in questo caso yellow. Il comando si chiude sempre con un punto e virgola perché se i comandi sono più di uno si rischia di fare confusione. E ovviamente, una volta finiti i comandi si chiude la parantesi graffa.
Un altro esempio può essere infatti:
.goog-te-gadget {
font-family: arial;
font-size: 16px;
color: black;
}
Un piccolo accenno al box-model che trovate alla destra del CSS. Esso serve per cambiare l’aspetto di ogni riquadro, contenitore, presente sul sito. Il box è composto dai seguenti principali comandi o proprietà: margin, border, padding, width, height, background-color. Per modificare l’aspetto del contenitore, dovrete agire su queste proprietà, facendo delle prove.
Ricordatevi che margin, border e padding sono caratterizzati dalle quattro dimensioni: top, right, bottom, left.
Cliccando sulle freccette a fianco dei comandi, si apriranno delle nuove serie di comandi, che potranno essere molto utili per scendere nei dettagli delle modifiche.
Spiegazione di alcuni comandi non intuitivi:
– em: indica la grandezza relativa al font utilizzato. Quindi, ad esempio, font-size: 1.5 em; significa che il font per un determinato elemento sarà una volta e mezzo quello del font del tema.
– I colori si possono scrivere anche in HTML, in una forma simile alla seguente: #RRGGBB. A questo link troverete il generatore automatico dei codici per ogni colore.
– serif, sans-serif, cursive, fantasy, monospace, riguardano l’aspetto del font (font-family).
– z-index: permette di stabilire l’ordine degli elementi (sopra, sotto).

All’inizio scrivere in CSS vi risulterà difficile, ma dopo qualche tentativo e dopo avere immagazzinato il meccanismo, vedrete che vi velocizzerete molto.
Con il CSS si possono fare delle cose davvero complesse, ma anche con i comandi base è possibile cambiare molto l’aspetto di un tema.
In generale, sconsiglio di usare troppo CSS. Questo perché rallenta la velocità del vostro sito web. Ci sono tecniche, come quella del Critical Path CSS, che consentono di ridurlo. Ma comunque, se avete bisogno di utilizzare molto CSS, significa che avete scelto il tema sbagliato. Meno ne usate, meglio è.

Ecco il video tutorial: