### [Dépannage CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)
**Publié le :** 23 novembre 2023
**Auteur :** Umair Majeed
**Extrait :** Apprenez à résoudre les problèmes CSS sur vos formulaires afin qu’ils s’affichent correctement.
**Contenu :**
Avez-vous créé du CSS personnalisé pour vos formulaires, mais vous n’avez pas pu voir ces styles lors de la visualisation de votre site ? Il existe quelques problèmes courants qui peuvent empêcher le CSS de s’afficher correctement sur un site.
Ce tutoriel vous guidera à travers les options pour dépanner pourquoi votre CSS ne fonctionne pas et proposera des solutions possibles.
---
**Remarque :** Si vous préférez ne pas utiliser de CSS personnalisé pour styliser vos formulaires, envisagez de consulter notre tutoriel sur le [style des formulaires](https://wpforms.com/docs/styling-your-forms/) pour apprendre à styliser vos formulaires dans l’éditeur de blocs.
### Mise en cache du navigateur
Les navigateurs mettent souvent en cache ou stockent temporairement les ressources des sites Web que vous visitez pour améliorer la vitesse de chargement. Certains sites utilisent également des plugins pour une mise en cache supplémentaire. Souvent, lorsque vous ne voyez pas vos styles personnalisés sur votre site, c’est parce que le navigateur ou un autre système a mis en cache une ancienne version de votre site.
Voici un tutoriel qui vous guidera à travers les principales étapes pour [vider le cache de votre site et de vos plugins](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "Comment vider votre cache dans WordPress").
Si la vidage du cache de votre navigateur ne semble pas fonctionner, voici quelques stratégies supplémentaires à essayer :
#### Essayer un navigateur différent
Chaque navigateur conserve son propre cache des sites que vous visitez. En ouvrant votre site dans un navigateur différent (ou dans le mode privé proposé par certains navigateurs, comme la fenêtre de navigation privée de Chrome), vous pouvez souvent voir une version de votre site non mise en cache.
#### Demander à votre hébergeur s’il a un cache
Certains hébergeurs fournissent une mise en cache pour votre site directement sur leurs serveurs, où sont stockés les fichiers de votre site. Si vous n’êtes pas sûr, vous voudrez peut-être contacter votre hébergeur pour lui demander s’il met votre site en cache et, s’il le fait, lui demander de vider ce cache pour vous.
#### Essayer une source Internet différente
Parfois, le simple fait de charger votre site via une source Internet différente peut aider à contourner un cache existant. Si vous avez un appareil mobile avec des données disponibles, le moyen le plus simple de le faire est de désactiver temporairement le WiFi sur votre appareil et de recharger la page.
### Format CSS invalide
Le CSS doit être écrit dans un format spécifique pour que le navigateur puisse le comprendre. Il existe de nombreux outils en ligne pour vérifier la validité de votre CSS, y compris le [Validateur CSS de W3School](http://validator.w3.org/ "Service de validation de balisage W3C"). C’est une excellente option si vous avez beaucoup de CSS personnalisé et un peu d’expérience préalable dans la création de CSS.
Si vous n’utilisez qu’une petite quantité de CSS, il peut parfois être plus facile de faire une vérification rapide du format vous-même. Commençons par examiner un extrait de CSS valide :
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
```
Voici pourquoi ce CSS est valide ou « lisible » par les navigateurs :
- **Format de sélecteur correct :** Si le sélecteur comprend plusieurs parties, il doit être écrit du « plus grand » au « plus petit ». Dans l’exemple ci-dessus, `div.wpforms-container-full` est l’élément conteneur le plus grand du HTML, tandis que `.wpforms-form` se trouve à l’intérieur de ce conteneur. Le dernier élément et le plus petit du sélecteur, `.wpforms-title`, est contenu à l’intérieur de ces deux autres éléments. Dans tout autre ordre, le navigateur ne pourra pas lire ce sélecteur.
- **Deux accolades :** Il doit y avoir une accolade ouvrante ({) juste après le sélecteur CSS et à la fin de la liste des propriétés et valeurs. Oublier cette accolade fermante (}) est une erreur courante, et empêchera généralement tout le CSS en dessous d’être affiché dans le navigateur.
- **Deux-points et point-virgule :** Assurez-vous d’inclure un deux-points (:) entre chaque propriété et valeur CSS, et un point-virgule (;) après chaque valeur afin que le navigateur puisse lire votre CSS (par exemple, `font-size: 26px;`).
- **Utilisation correcte des espaces blancs :** Pour la plupart, le CSS n’est pas très exigeant en matière d’espaces blancs (y compris les tabulations et les espaces). Une exception, cependant, concerne les unités. `26px` fonctionnera, par exemple, tandis que `26 px` ne fonctionnera pas.
Pour plus d’informations sur la rédaction de CSS avec la syntaxe appropriée, vous pouvez consulter [ce tutoriel de W3Schools](https://www.w3schools.com/css/css_syntax.asp "Syntaxe CSS").
### Spécificité CSS
Étant donné que tous les thèmes et la plupart des plugins contiennent leurs propres ensembles de styles, vous constaterez souvent que vos styles personnalisés doivent « concourir » contre les styles existants. Dans de telles situations, le sélecteur CSS le plus spécifique l’emportera presque toujours sur un sélecteur moins spécifique.
Par exemple, voici le CSS par défaut qui définit la taille de la police des titres de formulaire dans WPForms :
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
```
Essayons de remplacer ce CSS pour agrandir la police. Il peut être tentant d’utiliser un sélecteur CSS court comme celui-ci :
```
.wpforms-title {
font-size: 40px;
}
```
Ce CSS est valide, mais ses styles ne seront pas appliqués dans le navigateur. Les styles par défaut seront appliqués à la place car ils ont un sélecteur plus spécifique. Vous devriez plutôt utiliser le même sélecteur plus long que le style par défaut pour votre CSS personnalisé :
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
```
**Remarque :** Pour plus d’informations sur les sélecteurs, vous pouvez consulter cette liste de [sélecteurs de champs de formulaire WPForms et leurs styles par défaut](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Comment personnaliser le style des champs de formulaire individuels").
#### Utilisation de !important en CSS
Dans certaines situations, vous pouvez forcer un extrait de CSS moins spécifique à fonctionner en incluant la règle `!important` avant le point-virgule. Il est toujours préférable d’essayer d’abord un sélecteur plus spécifique (comme décrit ci-dessus), mais parfois cela peut offrir une solution rapide.
Il est important de noter, cependant, que l’ajout de la règle `!important` ne fonctionnera pas toujours. Essayons cette approche pour le CSS dont nous avons discuté dans le dernier exemple :
```
.wpforms-title {
font-size: 40px !important;
}
```
Dans cette situation, le navigateur préfère la spécificité du CSS par défaut à la règle `!important`, donc ce CSS ne sera pas appliqué à votre site.
Examinons un exemple où l’ajout de la règle `!important` *fonctionne*. Par défaut, l’astérisque (*) qui marque un champ « requis » dans WPForms est rouge :
Voici le CSS qui crée ce style (`#ff0000` est un code hexadécimal pour la couleur rouge) :
```
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
```
Nous voulons que ces astérisques apparaissent en bleu à la place. Nous pourrions copier ce sélecteur complet à partir du CSS ci-dessus, ou nous pourrions utiliser un sélecteur court et ajouter la règle `!important`, comme dans cet extrait de CSS :
```
.wpforms-required-label {
color: #007acc !important;
}
```
Il peut être difficile de savoir si la règle `!important` fonctionnera ou non, vous devrez donc probablement essayer et tester.
Voilà ! Nous avons couvert les stratégies de dépannage les plus courantes à utiliser lorsque le CSS ne fonctionne pas. Si vous avez toujours des problèmes pour styliser vos WPForms, veuillez [contacter le support](https://wpforms.com/contact/ "Page de contact WPForms") afin que nous puissions vous aider.
Ensuite, souhaitez-vous personnaliser davantage vos formulaires ? Consultez [notre tutoriel sur la personnalisation des champs de formulaire individuels](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "Comment personnaliser le style des champs de formulaire individuels") pour plus de détails et d’exemples.
**Catégories :** Style, Style et personnalisation, Dépannage
---