CSS WordPress: una guida semplice

WordPress è uno dei CMS (Content Management System) più popolari al mondo, apprezzato per la sua semplicità di utilizzo ma anche per l’elevata possibilità di personalizzazione. In questo articolo studieremo le basi del CSS, che offre una gestione completa della grafica del proprio sito WordPress, per capire come funziona e come padroneggiarlo al meglio.

Cos’è il CSS e perché è importante in WordPress

CSS è l’acronimo di Cascading Style Sheets, ossia Fogli di Stile a Cascata. Per comprendere meglio cos’è il CSS WordPress, possiamo paragonarlo a una casa: l’HTML rappresenta i mattoni e le fondamenta, mentre il CSS riguarda la parte estetica, come i colori, l’intonaco e la disposizione dei mobili.

In WordPress i temi moderni sicuramente offrono molte opzioni, ma prima o poi si incontrerà un limite visivo imposto da chi ha creato il design. Il CSS invece permette di superare questi ostacoli, offrendo il controllo totale sull’aspetto del progetto web.

Come funzionano i CSS in un sito WordPress

Quando un utente visita un sito, il suo browser scarica le informazioni del server. Prima legge l’HTML per caricare i contenuti, come testi e immagini, poi legge i file CSS per capire come mostrarli sullo schermo.

La parola “a cascata” significa proprio che il browser legge le regole dall’alto verso il basso. Se quindi due regole entrano in conflitto (ad esempio una dice che i testi devono essere neri e un’altra li vuole rossi), di solito vince l’ultima scritta o quella più specifica. WordPress CSS gestisce questo processo caricando prima il design di base e poi le personalizzazioni.

La sintassi CSS: come leggere e scrivere una regola

Il codice CSS a un primo sguardo può risultare complesso, ma in realtà segue una grammatica molto semplice che si basa su tre elementi: selettore, proprietà e valore. Ecco un esempio pratico: p { color: blue; }.

Il selettore p dice al browser di applicare la regola a tutti i paragrafi; le parentesi graffe { } contengono le istruzioni; la proprietà color indica cosa vogliamo modificare (il colore del testo); il blue è il valore scelto; infine il punto e virgola ; chiude l’istruzione, permettendo di aggiungerne altre in seguito.

I selettori CSS principali: elementi, classi e ID

I selettori servono per comunicare al codice CSS cosa modificare. Ne esistono tre tipi fondamentali:

1. Elementi. Puntano ai tag HTML generici. Ad esempio, scrivere h1 modificherà tutti i titoli principali, mentre img cambierà tutte le immagini del sito.
2. Classi. Sono le più versatili e permettono di creare uno stile per poi applicarlo a elementi specifici. Iniziano sempre con un punto e possono essere usate più volte.
3. ID. Identificano un elemento unico e irripetibile nella pagina, come l’intestazione, e iniziano sempre con un cancelletto.

Le proprietà CSS più utilizzate per modificare l’aspetto del sito

Esistono centinaia di proprietà CSS, ma per personalizzare WordPress basta utilizzarne poche e in modo mirato.

La proprietà color cambia il colore del testo, mentre background-color modifica lo sfondo di un elemento. Con font-size si imposta la grandezza del testo e con font-weight si decide lo spessore (come il grassetto). La regola text-align serve ad allineare il testo a destra, a sinistra o al centro. Infine, display è utilissimo per far scomparire del tutto un elemento, usando il valore none.

Il modello Box del CSS: margin, border e padding

Per gestire il posizionamento e gli spazi degli elementi, bisogna capire cos’è il Box Model (modello a scatola). Nel CSS, ogni elemento si trova in un rettangolo invisibile formato da quattro livelli.

Al centro c’è il contenuto vero e proprio e subito fuori c’è il padding, cioè lo spazio interno tra il contenuto e il suo limite. Poi c’è il border, il bordo della scatola che può essere colorato. Infine all’esterno c’è il margin, il margine che distanzia la “scatola” dagli altri elementi della pagina.

Dove inserire il CSS in WordPress (style.css, CSS aggiuntivo e tema child)

Ci sono tre opzioni per inserire questo codice in WordPress. La prima è lo strumento CSS Aggiuntivo: bisogna andare su Aspetto > Personalizza sulla bacheca e incollare il codice in basso. Le modifiche resteranno anche dopo gli aggiornamenti del tema.

La seconda opzione, usata per modifiche strutturali profonde, è modificare il file style.css di un tema child. Questa pratica evita di perdere tutto il lavoro quando il tema principale si aggiorna. Infine, molti page builder permettono di inserire frammenti di CSS direttamente nelle opzioni del singolo blocco.

Come sovrascrivere correttamente il CSS di un tema WordPress

A volte si può scrivere una regola perfetta, ma sul sito comunque non cambia nulla. Questo succede perché nel CSS vince la regola più specifica. Se ad esempio il tema dice “i paragrafi nell’articolo sono neri” (.entry-content p) e si scrive genericamente “i paragrafi sono rossi” (p), vincerà il tema perché è più preciso.

Per sovrascrivere la regola, il selettore dovrà essere altrettanto specifico. In casi estremi si può usare la dicitura !important prima del punto e virgola (esempio: color: red !important;), che forza il browser a seguire quella dicitura, ignorando le altre regole in cascata.

Applicare CSS a una singola pagina o elemento

WordPress assegna automaticamente delle classi uniche a ogni pagina. Se ad esempio si volesse nascondere il titolo solo nella pagina “Chi siamo”, e la pagina in questione ha la classe .page-id-10, basterà scrivere .page-id-10 h1 { display: none; } per far sparire il titolo solo lì.

Per modificare un singolo elemento, è invece necessario selezionare il blocco desiderato, aprire le impostazioni “Avanzate” e inventare un nome nel campo “Classe CSS aggiuntiva”. Utilizzando quel nome nel proprio codice CSS, le modifiche saranno applicate solo a quel preciso elemento.

Ispezionare il CSS di una pagina con gli strumenti del browser

Per scoprire quale classe usare per modificare un elemento, basta usare lo strumento “Ispeziona” del browser. Bisogna fare clic destro sull’elemento da cambiare e scegliere “Ispeziona” o “Ispeziona elemento”.

Si aprirà un pannello laterale: da un lato si vedrà l’HTML, dall’altro il CSS attivo in quel preciso istante. In questo modo è possibile leggere i nomi esatti delle classi e degli ID e capire quali colori o spaziature il tema sta applicando.

Come testare e verificare i codici CSS prima di applicarli

Il pannello “Ispeziona” consente anche di fare prove pratiche in tempo reale. Si può cliccare sulle regole CSS direttamente nel browser e modificarle al volo, oppure scriverne di nuove.

Se si cambia il valore, si può vedere il risultato in tempo reale sullo schermo. In caso di errore, è sufficiente ricaricare la pagina web e tutto tornerà normale. Quando si trova il codice perfetto, è opportuno copiarlo e incollarlo nel CSS Aggiuntivo di WordPress per renderlo definitivo.