Vuoi cambiare colori delle tue pagine web, oppure definire un nuovo stile per il corsivo della tua pagina? Eccoti una guida diretta, senza fronzoli e semplicemente ideale per i principianti.
Che cos’è il CSS
CSS è il modo che viene offerto all’interno del markup HTML per modificare lo stile delle pagine web, ovvero definire nei minimi dettagli come debbano apparire i vari “pezzi” che compongono la pagina. Tradizionalmente, questo genere di modifiche veniva fatto da codice: si andava a modificare il file .HTML, e si interveniva sulla sezione inclusa nei tag <style> oppure, in molti casi, si modificano i file .css che erano inclusi nella pagina stessa. Con l’avvento dei CMS dinamici le cose sono radicalmente cambiate, visto che è WordPress (ma anche Joomla! e via dicendo) a stabilire la politica di inserimento degli script.
Come modificare il CSS delle pagine in WordPress
Modificare il CSS di una pagina in WordPress, pertanto, passa necessariamente per un minimo di conoscenza di questi “meccanismi” di inserimento. In genere, WordPress include i file di stile in due modi:
- mediante il theme che si sta usando (ed il file di solito si chiama style.css);
- mediante plugin che eventualmente modificano lo stile della pagina
Entrambi i casi sono complessi da analizzare e soprattutto poco ideali per i principianti: non fosse altro che, alla fine dei conti, bisogna saperne di più sul Codex di WordPress (cioè su come funziona internamente a livello di codice PHP).
Per aggirare questo problema, solitamente consiglio un approccio più leggero e gestibile, che si basa su un plugin molto facile da usare che si chiama:
questo plugin fa una cosa molto utile, ovvero permette di inserire blocchi di stile in CSS, frammenti HTML e codice JS dentro tutte le pagine, oppure (volendo) solo in pagine specifiche (utilizzando la versione premium). La versione free ad ogni modo va bene, direi per il 70% dei casi in cui avete bisogno di modificare il CSS del vostro sito, e la cosa interessante è che in genere questo sistema funziona anche sui theme proprietari o fatti da altri webmaster, senza costringervi a toccare o muovere una sola riga di codice PHP. Quindi lasciate perdere qualsiasi altro approccio vi sia stato proposto, perchè credetemi che questo è un modo davvero facile per personalizzare il vostro sito e, con un po’ di furbizia e di esperienza, fare tutte le modifiche che volete anche dove sembrano praticamente impossibili.
Struttura di una pagina HTML
Ecco la generica struttura comune a qualsiasi pagina HTML, da Google.it a Wikipedia passando per Trovalost e per il sito della vostra banca. Se da un lato c’è una struttura fatta di tag HTML (delimitati da < e >), dall’altra c’è il risultato che viene, come si dice in gergo, renderizzato dal vostro browser quando provate ad aprirla.
Anche se è generata da WordPress, la pagina HTML sempre quella rimane: in pratica, è suddivisa in 3 sezioni base che sono l’HEADER (la parte alta della pagina, il BODY (il corpo) ed il FOOTER (la parte finale).
Per quello che ci interessa, nella parte HEADER andranno a finire i file CSS, nel body metterete solo markup HTML e nel FOOTER, infine, andremo a mettere gli script (una pagina HTML in questo caso si dice “ben formata“). Simple Custom CSS & JSÂ permette di intervenire a questo livello, e lo fa (cosa davvero fantastica, secondo me) direttamente da backend. Nello specifico permette di:
- aggiungere uno o più blocchi di CSS nell’HEADER, per ogni pagina;
- aggiungere uno o più script in JS nel FOOTER, per ogni pagina;
- aggiungere uno o più blocchi HTML per ogni pagina (utile per validare il sito presso i programmi di affiliazione o la search console, ad esempio)
Di default, quello che inserirete andrà a finire su tutte le pagine. Una volta installato, il plugin aggiungerà un men๠laterale sulla sinistra, nel quale troverete (vedi immagine in basso) 4 voci: clicchiamo sulla seconda, ad esempio, dove c’è scritto Add Custom CSS (All custom code permette di vedere tutti i blocchi che avete già inserito).
Ci torneremo tra un attimo, non prima di aver fatto un mini-corso davvero essenziale su come funziona il CSS e come si usa.
Come funziona il CSS
Il CSS (fogli di stile a cascata, o Cascading Style Sheet) si basa essenzialmente su definizioni di proprietà , che possono essere singole oppure di gruppo.
Sintassi base CSS
Ad esempio, per definire un colore rosso, andremo a scrivere una proprietà color con valore red:
color: red;
molto semplice e leggibile, insomma, per quanto si usi più spesso la notazione esadecimale per i colori – il rosso è ad esempio #ff0000, e potrete mappare tutti i colori che volete ad esempio qui). Quindi la cosa di prima potete scriverla in modo equivalente come:
color: #ff0000;
Attenzione alla sintassi: bisogna sempre scrivere il nome della proprietà seguito da :, poi uno spazio, poi il valore della proprietà , poi sempre un ; finale.
Chiarito questo, possiamo scrivere qualsiasi altra proprietà che riguardi non solo i colori, ma anche forma dei caratteri, spaziatura e posizione di qualsiasi elemento HTML che vogliamo. Qui arriva l’inghippo: se usassimo solo questo formato “nudo”, il browser non saprebbe a quale elemento HTML associarlo.
Uso dei selettori CSS
E allora che cosa si fa? Si utilizzano tre tipi di selettori, ovvero di elementi che servono ad identificare – nell’esempio qui sopra – cosa vogliamo colorare di rosso. Primo selettore è il nome dell’elemento HTML, quindi ad esempio se scrivessimo:
h1{
color: #ff0000;
}
significherebbe “colora tutti gli H1 del sito di rosso nella gradazione #ff0000“. Questo selettore non deve essere per forza un H1, ma può essere un tag <em>, un <a> (link), uno <span>, un <div> e cosଠvia. Un secondo tipo di selettore potrebbe essere un ID, ovvero un attributo che identifica nell’HTML originale l’elemento, quindi ad esempio se abbiamo in HTML:
<div id=”contenitore_principale”>
se poi vado a scrivere nel CSS il nome dell’ID con il # davanti:
#contenitore_principale{
color: #ff0000;
}
avrò fatto in modo che tutti i div identificati da contenitore_principale siano colorati di rosso. Questo per il colore del testo, ma per lo sfondo, ad esempio, come si fa? Facile, basta cambiare il nome della proprietà ed usare background-color:
#contenitore_principale{
background-color: #ff0000;
}
Un terzo ed ultimo tipo di selettore è la classe, che funziona in modo simile all’ID ma che in CSS viene identificato da un . prima del nome:
.container13{
background-color: #ff0000;
}
che andrà a colorare lo sfondo di un HTML fatto cosà¬:
<div class=”container13″>
In breve, è tutto qui, e serve ovviamente un pochino di pratica per capire davvero come funzioni il tutto. Le varie proprietà del CSS sono molto, molto numerose, ovviamente, e si possono anche combinare tra di loro, ma per quello che ci serve è opportuno fermarci qui e tornare un attimo al funzionamento del plugin che abbiamo installato.
Pubblicare CSS personalizzato in WordPress: passo-passo
Torniamo quindi al menu principale del plugin:
e clicchiamo direttamente su Add Custom CSS, che permette di inserire la definizione di stile che abbiamo spulciato prima direttamente nel vostro sito in WordPress. Poniamo di voler colorare di rosso, ad esempio, tutti gli H1 del vostro sito web: per farlo, facciamo click sulla voce in esame, ed incolliamo il seguente codice nella schermata, avendo cura di inserire un titolo significativo per ricordarci a cosa serve quello snippet.
Esempio:
sulla sinistra troviamo opzioni che in genere potete lasciare cosଠcome sono. Linking type lasciamo selezionato “Internal“, per una questione di efficenza di caricamento (vedi ottimizzazione del PageSpeed Insights); Where on page lasciamo selezionato Header, cosଠil CSS andrà dove deve andare. Where in site, infine, ovviamente lasciamo selezionato In frontend, che è la parte pubblica del sito.
Fatto questo, pubblichiamo le modifiche:
e a questo punto dovreste già vedere gli H1, cioè i titoli degli articoli del vostro sito, colorati di rosso. Se non dovesse funzionare in prima istanza, potete forzare la proprietà inserendo un !important dopo la definizione e prima del ;, che quindi diventerebbe:
color: #ff0000!important;
Una volta pubblicato questo snippet, ne potete pubblicare anche altri secondo la politica che più preferite; io consiglio sempre di mantenere separati logicamente i vari pezzi di codice, in ottica di ordine e di gestione efficente e veloce del sito web. Separati logicamente in altre parole significa: creo un widget per i colori, uno per il posizionamento dei pezzi della pagina, uno per le accortezze topigrafiche e cosଠvia.
Disattivare e attivare il CSS all’occorrenza
La grandezza di questo plugin è che vi permette di innestare CSS per personalizzare il sito senza dover toccare nulla nella struttura dello stesso, e anzi potendolo disabilitare all’occorrenza. Se cliccate su All custom code, nello specifico, troverete quello che avrete creato e potrete disabilitarlo all’occorrenza (ad esempio quando fate debug) cliccando su Deactivate:
Non finisce qui, ed anzi abbiamo appena cominciato: sul web trovate un sacco di guide più o meno avanzate al CSS, e non avrete che consultarle dopo aver letto questa guida base che, mi auguro, vi sia stata utile.
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟠 Cosa sono le equazioni di secondo grado
- 🟠 Domini .cards: come e dove registrarne uno
- 🔵 Cosa sono le equazioni di secondo grado
