La seconda parte della guida al linguaggio CSS – Riguardatevi la prima parte!
Il box del CSS
Nel CSS, tutti i contenuti sono racchiusi in un rettangolo invisibile formato da più strati, come vedi nel grafico qui sotto:
Il contenuto è circondato dal padding, un’imbottitura trasparente, a sua volta circondata da un bordo. All’esterno del bordo si trova il margin, un margine anch’esso trasparente.
Usando il CSS potrai determinare spessori, stile e colori di questi elementi.
Padding
I contenuti hanno il padding su quattro lati: top (superiore), right (destro), bottom (inferiore) e left (sinistro). Seguendo quest’ordine, puoi definire lo spessore del padding usando i pixel come valori nella dichiarazione CSS. Ecco un esempio:
.image {
padding: 20px 30px 10px 40px;
}
I contenuti associati alla classe .image avranno un padding superiore pari a 20px, destro pari a 30px, inferiore pari a 10px e un padding di 30px sulla sinistra.
In alternativa, puoi creare una dichiarazione per ciascun lato, in questo modo:
.image {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 40px;
}
Bordi
Il bordo è un elemento del box CSS caratterizzato da spessore, colore e stile.
Come il padding, il bordo ha quattro lati: top, right, bottom e left.
Le principali proprietà relative ai bordi sono:
border-width
Questa proprietà serve a determinare lo spessore del bordo. Anche in questo caso, può essere usato un valore di tipo testuale (thin – sottile, medium – medio, thick – spesso) oppure un valore in pixel.
.box-with-border {
border-width: thick;
}
.box-with-border {
border-width: 10px;
}
border-style
La proprietà border-style è invece utile per determinare lo stile del bordo: solid (solido), dashed (tratteggiato), dotted (puntato) , double (doppio), eccetera.
Ecco un esempio di regola CSS per creare un bordo puntato con spessore 10px:
.box-with-border {
border-width: 10px;
border-style: dotted;
}
border-color
Anche in questo caso, usa un valore hex per impostare il colore del bordo.
.box-with-border {
border-width: 10px;
border-style: dotted;
border-color: #120A8F;
}
Il codice qui sopra farà apparire, attorno agli elementi associati alla classe box-with-border, un bordo puntato di spessore 10px e colore blu.
Come per il padding, i valori indicati nella dichiarazione possono essere applicati a tutti e quattro i lati oppure ad un lato singolo, utilizzando come proprietà border-top, border-right, border-bottom o border-left.
border-radius
Questa è un’altra proprietà molto utile. Serve, infatti, ad arrotondare gli angoli di un bordo. Nel campo valore potrai usare pixel oppure em. Più alto sarà il valore, più arrotondati saranno gli angoli.
.box-with-border {
border-width: 10px;
border-style: dotted;
border-color: #120A8F;
border-radius: 30px;
}
Margin
Le proprietà margin funziona esattamente come quella padding. Per ciascun lato, usa un valore in pixel seguendo l’ordine top, right, bottom, left.
In alternativa, crea una dichiarazione per ciascun lato.
.box-with-margin {
margin: 10px 20px 30px 40px;
}
E’ equivalente a:
.box-with-margin {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
Commenti
Concludiamo la quinta sezione di questa guida CSS parlando dei commenti.
Quando crei un foglio di stile contenente molte regole, è utile inserire delle note per ricordarti a cosa servono i vari codici oppure spiegarli a chi lavora con te sul sito.
Per contrassegnare il tuo testo come commento, dovrai usare /* all’inizio e */ alla fine. In questo modo, il tuo commento sarà visibile solo all’interno del foglio di stile e non sulla pagina visibile online.
Ecco un esempio:
/* La seguente classe è usata per ingrandire il font utilizzato per i titoli h1 */
h1 {
font-size: 30px;
}
Ora che consci alcune delle proprietà più importanti, passiamo alla prossima sezione di questo breve corso CSS. Imparerai come usare i codici che hai imparato nel tuo sito WordPress.
6. Applicare le regole CSS al tuo sito WordPress
Il Foglio di stile style.CSS
Su WordPress, tutte le regole CSS sono contenute in un file chiamato style.css. Questo è anche chiamato foglio di stile.
Puoi visualizzare il foglio di stile del tuo tema navigando in Aspetto > Editor.
In teoria, potresti fare le modifiche e le aggiunte necessarie direttamente nel tuo foglio di stile. Tuttavia, se decidi di lavorare direttamente sul file style.css, ogni volta che effettuerai un aggiornamento del tema tutte le modifiche andranno perse.
Tema Child
Una prima soluzione è quella di usare un tema child, cioè, un tema che eredita le caratteristiche del tema genitore e che può essere modificato senza che tutti i cambiamenti vengano persi ad ogni aggiornamento.
Campo Custom CSS
Una seconda soluzione è quella di utilizzare lo spazio Custom CSS (cioè, CSS personalizzato) che è ormai una funzionalità presente nella maggior parte dei temi WordPress, oltre che nel pannello ‘Personalizza’ WordPress.
Se usi una delle ultime versioni di WordPress
Naviga all’interno del pannello ‘Personalizza‘ e cerca il campo chiamato CSS Aggiuntivo. Qui potrai inserire i tuoi codici CSS personalizzati. Attenzione però che i codici inseriti qui vanno sempre a sovrascrivere i codici presenti nel file style.css.
Se vuoi usare le funzionalità del tuo tema
Solitamente, il campo per inserire codici CSS personalizzati si trova all’interno delle sezioni per la configurazione del tema. Per esempio, sul tema Enfold, si trova in Theme Options > General Styling (in questo tema, il campo è chiamato Quick CSS)
Sovrascrivere le dichiarazioni CSS
Per ottenere gli effetti desiderati, dovrai sovrascrivere dichiarazioni CSS già presenti all’interno del file style.css.
Talvolta, il box custom CSS presente all’interno del tema (come descritto nella sezione precedente) va a sovrascrivere automaticamente il foglio di stile.
Se però noti che le modifiche non hanno effetto, dovrai indicare manualmente che le tue nuove dichiarazioni devono avere priorità.
Per farlo, usa la dicitura !important alla fine della dichiarazione, prima del punto e virgola.
Ecco un esempio:
h2 {
font-size: 20px !important ;
}
Questa dichiarazione andrebbe a sovrascrivere le altre dichiarazioni relative alla misura del font dell’elemento h2 all’interno del foglio di stile.
Dichiarazioni “Inline”
Se hai bisogno di modificare il CSS di un singolo elemento, potrai farlo direttamente all’interno dell’Editore di Testo, senza dover creare una nuova classe o ID nel foglio di stile.
Semplicemente, aggiungi le dichiarazioni CSS all’interno del tag HTML che precede il contenuto, usando la dicitura “style=” così:
<h2 style="color:#ababab;font-size:40px;">Questo è un sottotitolo.</h2>
Come vedi, dopo il tag h2 è presente la dicitura style= . All’interno delle virgolette, sono racchiuse due dichiarazioni CSS (color: #ababab e font-size:40px), ciascuna chiusa dal punto e virgola.
In questo caso, la regola CSS sarà applicata esclusivamente a questo sottotitolo h2.
Modificare il CSS solo per una singola pagina o post
Di tanto in tanto, può capitare che tu voglia applicare modifiche solo al CSS di una singola pagina o post. Ti faccio un esempio: è possibile che sulla tua pagina ‘Chi Sono’ tu voglia avere i link di colore rosso, però vuoi mantenerli del colore default blu su tutto il resto del sito.
E’ possibile fare una modifica di questo tipo usando semplici codici CSS. Ti basterà ispezionare il CSS della pagina in questione (come è anche spiegato nella sezione successiva di questa guida) e di applicare i codici solo all’ID di quella pagina. Per maggiori informazioni, ti consiglio di leggere la guida di approfondimento su come applicare modifiche CSS a singoli post o pagine.
7. Ispezionare il CSS delle pagine web
Il modo migliore per imparare il CSS è esercitandosi. Con la pratica, usare i codici CSS diventerà sempre più facile.
Oggi, abbiamo la fortuna di poter utilizzare strumenti fantastici per ispezionare i codici CSS di qualunque pagina web e anche testare temporaneamente le nostre modifiche, senza che i cambiamenti siano definitivi.
Questi strumenti sono molto utili anche per trovare le classi e gli ID associati ai contenuti delle tue pagine. Una volta trovato il nome della classe su cui vuoi lavorare, potrai creare per essa nuove dichiarazioni che andranno a sovrascrivere quelle già presenti nel file style.css
Chrome DevTools per browser Google Chrome
Se usi come browser Google Chrome, hai a disposizione Chrome DevTools.
Su qualunque pagina web, clicca il tasto destro del tuo mouse e seleziona ispeziona elemento. Si aprirà nella parte inferiore della pagina una finestra suddivisa in due parti: sulla destra, l’HTML della pagina. Sulla sinistra, il CSS.
Per ispezionare nel dettaglio un elemento specifico della pagina, clicca sulla piccola lente d’ingrandimento che si trova nell’angolao in alto a sinistra del box DevTools. Quindi, seleziona sulla pagina l’elemento di tuo interesse.
Vedrai che i codici nel box si aggiorneranno con quelli relativi all’elemento selezionato (puoi sempre usare la barra di scorrimento per muoverti verso l’alto ed il basso e selezionare elementi all’interno del codice stesso).
Una volta individuate le dichiarazioni CSS su cui vuoi lavorare, clicca due volte sul codice. In questo modo, si attiverà un campo per modificare il codice oppure disattivare del tutto le dichiarazioni CSS.
Questo sarà un ottimo modo per esercitarti e testare tutte le modifiche che desideri.
Firebug per browser Mozilla Firefox
Se invece usi come browser Mozilla Firefox, ti consiglio Firebug. Questa è una vera e propria estensione che aggiunge al tuo browser diverse funzionalità molto utili per analizzare e modificare codici HTML e CSS.
Per installare Firebug, visita il sito ufficiale e clicca Install Firebug in alto a destra. Avvia il download e segui il procedimento per aggiungere l’estensione alla barra degli strumenti del tuo browser.
Per attivare Firebug, clicca il simbolo a forma di insetto in alto a destra: questo farà aprire un box nella parte inferiore della pagina, similare a quello Chrome DevTools.
Anche qui, sulla sinistra vedrai il codice HTML, sulla destra quello CSS.
Per visualizzare tutto il CSS della pagina, clicca la tab CSS.
Per selezionare un elemento specifico sulla pagina, clicca il simbolo con il piccolo rettangolo e il puntatore che si trova nella barra degli strumenti della finestra Firebug.
8. Verificare i tuoi codici CSS
Quando si sta imparando ad usare il CSS, non è raro dimenticare qualche parentesi o punto e virgola.
Un ottimo strumento per testare la validità dei tuoi codici è il CSS Validation System del W3C, la comunità internazionale che si occupa di sviluppare gli standard relativi ai codici sul web.
Semplicemente, inserisci le tue regole CSS all’interno del campo di testo e clicca “Verifica”. Se i tuoi codici sono corretti, apparirà “Congratulazioni. Nessun errore trovato.” Se invece ci sono errori, apparirà un messaggio contente la riga da correggere.
Conclusione
Siamo arrivati alla fine di questa guida introduttiva al CSS. Ricorda che il modo migliore per imparare a codificare è fare pratica: ti consiglio di iniziare ispezionando le pagine web suggerite nella penultima sezione. Avendo letto questa guida, sarai già in grado di comprendere il significato di molte dichiarazioni.
Hai già provato a modificare il CSS del tuo sito web? Oppure fino ad ora i codici ti sono sembrati del tutto incomprensibili? Come sempre, per qualunque domanda o suggerimento, ti invito a lasciare un commento sotto all’articolo.
Si potrebbe decidere quali elementi (tags) adoperare a seconda di quello che abbiamo intenzione di fare. Questo linguaggio infatti non ha variabili da dichiarare, non esegue operazioni aritmetiche e non prende decisioni. Ha però delle regole da rispettare, la più importante è la struttura all’interno della quale vanno collocati tutti i singoli elementi (tags). Questa struttura dovrà essere sempre presente su ogni pagina che andremo a creare. Vediamo come e da cosa è composta la struttura tipo di base:
