### [Risoluzione dei problemi CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)
**Pubblicato:** 23 novembre 2023
**Autore:** Umair Majeed
**Estratto:** Scopri come risolvere i problemi CSS sui tuoi moduli in modo che vengano visualizzati correttamente.
**Contenuto:**
Hai creato CSS personalizzato per i tuoi moduli, ma non sei riuscito a vedere quegli stili quando visualizzi il tuo sito? Ci sono alcuni problemi comuni che possono causare il mancato corretto aspetto del CSS su un sito.
Questo tutorial ti guiderà attraverso le opzioni per risolvere il problema del perché il tuo CSS non funziona e offrirà possibili soluzioni.
---
**Nota:** Se preferisci non utilizzare CSS personalizzato per stilizzare i tuoi moduli, considera di consultare il nostro tutorial [sulla stilizzazione dei moduli](https://wpforms.com/docs/styling-your-forms/) per imparare come stilizzare i tuoi moduli nell'editor a blocchi.
### Cache del browser
I browser memorizzano spesso nella cache o archiviano temporaneamente le risorse dei siti Web che visiti per migliorare la velocità di caricamento. Alcuni siti utilizzano anche plugin per la memorizzazione nella cache aggiuntiva. Spesso, quando non vedi i tuoi stili personalizzati sul tuo sito, è perché il browser o un altro sistema ha memorizzato nella cache una versione precedente del tuo sito.
Ecco un tutorial che ti guiderà attraverso i passaggi principali per [svuotare la cache del tuo sito e dei plugin](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "Come svuotare la cache in WordPress").
Se svuotare la cache del browser non sembra funzionare, ecco un paio di strategie aggiuntive da provare:
#### Provare un browser diverso
Ogni browser conserva la propria cache dei siti che visiti. Aprendo il tuo sito in un browser diverso (o nella modalità privata offerta da alcuni browser, come la finestra di navigazione in incognito di Chrome), puoi spesso vedere una versione non memorizzata nella cache del tuo sito.
#### Chiedere al tuo host se hanno una cache
Alcuni host forniscono la memorizzazione nella cache per il tuo sito direttamente sui loro server, dove sono archiviati i file del tuo sito. Se non sei sicuro, potresti voler contattare il tuo host per chiedere se stanno memorizzando nella cache il tuo sito e, in tal caso, chiedere loro di svuotare quella cache per te.
#### Provare una fonte Internet diversa
Occasionalmente, il semplice caricamento del tuo sito tramite una fonte Internet diversa può aiutare a bypassare una cache esistente. Se hai un dispositivo mobile con dati disponibili, il modo più semplice per farlo è disattivare temporaneamente il WiFi sul tuo dispositivo e ricaricare la pagina.
### Formato CSS non valido
Il CSS deve essere scritto in un formato specifico affinché un browser possa comprenderlo. Esistono molti strumenti online per verificare che il tuo CSS sia valido, incluso il [Validatore CSS di W3School](http://validator.w3.org/ "Servizio di convalida del markup W3C"). Questa è un'ottima opzione se hai molto CSS personalizzato e almeno un po' di esperienza precedente nella creazione di CSS.
Se stai utilizzando solo una piccola quantità di CSS, tuttavia, a volte può essere più facile fare un rapido controllo del formato da solo. Iniziamo esaminando uno snippet di CSS valido:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
```
Ecco perché questo CSS è valido o 'leggibile' dai browser:
- **Formato del selettore corretto:** Se il selettore include più parti, deve essere scritto dal più 'grande' al più 'piccolo'. Nell'esempio sopra, `div.wpforms-container-full` è l'elemento contenitore più grande nell'HTML, mentre `.wpforms-form` è all'interno di quel contenitore. L'elemento più piccolo e l'ultimo nel selettore, `.wpforms-title`, è contenuto all'interno di entrambi gli altri elementi. In qualsiasi altro ordine, il browser non sarà in grado di leggere questo selettore.
- **Due parentesi graffe:** Deve esserci una parentesi graffa di apertura ({) subito dopo il selettore CSS e alla fine dell'elenco di proprietà e valori. Dimenticare quella parentesi graffa di chiusura (}) è un errore comune e di solito impedirà la visualizzazione di tutto il CSS sottostante nel browser.
- **Due punti e punto e virgola:** Assicurati di includere i due punti (:) tra ogni proprietà e valore CSS e un punto e virgola (;) dopo ogni valore in modo che il browser possa leggere il tuo CSS (ad esempio, `font-size: 26px;`).
- **Uso corretto dello spazio bianco:** Per la maggior parte, il CSS non è molto esigente riguardo allo spazio bianco (che include tabulazioni e spazi). Un'eccezione a questo, tuttavia, riguarda le unità. Ad esempio, `26px` funzionerà, mentre `26 px` no.
Per ulteriori informazioni sulla scrittura di CSS con la sintassi corretta, puoi consultare [questo tutorial di W3Schools](https://www.w3schools.com/css/css_syntax.asp "Sintassi CSS").
### Specificità CSS
Dato che tutti i temi e la maggior parte dei plugin contengono i propri set di stili, spesso scoprirai che i tuoi stili personalizzati devono "competere" contro gli stili esistenti. In tali situazioni, il selettore CSS più specifico vincerà quasi sempre su un selettore meno specifico.
Ad esempio, ecco il CSS predefinito che imposta la dimensione del carattere dei titoli dei moduli in WPForms:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
```
Proviamo a sovrascrivere quel CSS per rendere il carattere più grande. Potrebbe essere allettante utilizzare un selettore CSS breve come questo:
```
.wpforms-title {
font-size: 40px;
}
```
Quel CSS è valido, ma i suoi stili non verranno applicati nel browser. Verranno invece applicati gli stili predefiniti perché hanno un selettore più specifico. Dovresti invece utilizzare lo stesso selettore più lungo dello stile predefinito per il tuo CSS personalizzato:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
```
**Nota:** Per maggiori informazioni sui selettori, puoi consultare questo elenco di [selettori dei campi modulo WPForms e i loro stili predefiniti](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Come personalizzare lo stile dei singoli campi modulo").
#### Utilizzo di !important in CSS
In alcune situazioni, puoi forzare un frammento di CSS meno specifico a funzionare includendo la regola `!important` prima del punto e virgola. È sempre meglio provare prima un selettore più specifico (come descritto sopra), ma a volte questo può offrire una soluzione rapida.
È importante notare, tuttavia, che l'aggiunta della regola `!important` non funzionerà sempre. Proviamo questo approccio per il CSS di cui abbiamo discusso nell'ultimo esempio:
```
.wpforms-title {
font-size: 40px !important;
}
```
In questa situazione, il browser preferisce la specificità del CSS predefinito rispetto alla regola `!important`, quindi questo CSS non verrà applicato al tuo sito.
Vediamo un esempio in cui l'aggiunta della regola `!important` *funziona*. Per impostazione predefinita, l'asterisco (*) che contrassegna un campo "obbligatorio" in WPForms sarà rosso:
Ecco il CSS che crea quello stile (`#ff0000` è un codice esadecimale per il colore rosso):
```
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
```
Vogliamo che questi asterischi appaiano invece blu. Potremmo copiare quel selettore completo dal CSS sopra, oppure potremmo usare un selettore breve e aggiungere la regola `!important`, come in questo snippet CSS:
```
.wpforms-required-label {
color: #007acc !important;
}
```
Può essere difficile sapere se la regola `!important` funzionerà o meno, quindi probabilmente dovrai provarci e testarla.
Ecco fatto! Abbiamo coperto le strategie di risoluzione dei problemi più comuni da utilizzare quando il CSS non funziona. Se hai ancora problemi a stilizzare i tuoi WPForms, ti preghiamo di [contattare il supporto](https://wpforms.com/contact/ "Pagina contatti WPForms") in modo che possiamo aiutarti.
Successivamente, desideri personalizzare ulteriormente i tuoi moduli? Dai un'occhiata [al nostro tutorial sulla personalizzazione dei singoli campi modulo](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Come personalizzare lo stile dei singoli campi modulo") per dettagli ed esempi.
**Categorie:** Stile, Stile e personalizzazione, Risoluzione dei problemi
---