Comment ajouter du CSS personnalisé à n'importe quel site web — un guide pour débutants

16 mai 2026 · par JustZix Team

Vous voulez changer l'apparence d'un site web — masquer un élément agaçant, corriger une police illisible, ou élargir une mise en page à l'étroit ? Ce guide accessible aux débutants vous montre comment ajouter du CSS personnalisé à n'importe quel site web, couvre honnêtement les avantages et inconvénients de chaque méthode, et se termine par un pas à pas pratique que vous pouvez suivre dès aujourd'hui.

Ce que signifie vraiment « CSS personnalisé »

Chaque page web est mise en forme avec du CSS — Cascading Style Sheets — des règles qui contrôlent les couleurs, les polices, les espacements et la mise en page. Le « CSS personnalisé » désigne votre propre CSS supplémentaire superposé à celui du site, appliqué uniquement dans votre navigateur. Le site ne change pour personne d'autre. Vous ne piratez rien ; vous ajustez la façon dont la page vous est présentée, un peu comme le mode Lecture ou un bloqueur de publicités.

Méthode 1 — les DevTools (temporaire, idéal pour tester)

Chaque navigateur moderne dispose d'outils de développement intégrés. Appuyez sur F12 (ou faites un clic droit sur un élément et choisissez « Inspecter »). Dans le panneau Styles, vous pouvez modifier le CSS en direct et voir le résultat instantanément.

Le hic : c'est temporaire. Dès que vous rechargez la page, tout est réinitialisé. Les DevTools sont parfaits pour déterminer quel CSS vous voulez, mais ce n'est pas un moyen de conserver un changement.

Méthode 2 — les outils intégrés du navigateur

Certains navigateurs vous permettent d'enregistrer une feuille de style personnalisée, et le mode Lecture réduit une page à son texte. Cela convient à des cas précis, mais c'est limité : le mode Lecture est tout ou rien, et une feuille de style personnalisée globale ne peut pas facilement cibler un site différemment d'un autre.

Méthode 3 — un userstyle ou une extension (permanent)

Pour effectuer un changement qui persiste après les rechargements et s'applique automatiquement aux sites choisis, il vous faut une extension qui injecte le CSS pour vous. C'est la réponse pratique pour la plupart des gens. Des outils CSS uniquement existent (couverts dans notre guide d'alternative à Stylish), et il existe des outils qui gèrent le CSS et le JavaScript ensemble. Nous allons parcourir l'un de ces derniers, JustZix, parce qu'il est gratuit et ne nécessite aucun compte.

D'abord — trouver le bon sélecteur

Avant de pouvoir styler quelque chose, vous devez le nommer en CSS — c'est un sélecteur. Faites un clic droit sur l'élément que vous voulez changer et choisissez « Inspecter ». Dans le HTML mis en évidence, regardez la class ou l'id de l'élément :

<div class="newsletter-popup" id="signup-modal">
  ... popup content ...
</div>

Une class s'écrit avec un point — .newsletter-popup. Un id s'écrit avec un dièse — #signup-modal. Ce sont vos sélecteurs.

Pas à pas — ajouter du CSS personnalisé avec JustZix

Installez l'extension depuis la page de téléchargement (cela prend environ deux minutes ; aucun compte).
Ouvrez le site que vous voulez styler.
Cliquez sur l'icône JustZix et choisissez Nouvelle règle.
Définissez un motif d'URL pour que la règle ne s'exécute que là où vous le voulez :
- https://example.com/* — tout le site
- https://example.com/blog/* — seulement la section blog
- * — tous les sites (à utiliser avec parcimonie)
Ouvrez le panneau CSS et collez votre CSS.
Enregistrez. La règle s'applique immédiatement et chaque fois que vous revenez sur une page correspondante.

Exemple 1 — masquer un élément

La demande la plus courante : faire disparaître quelque chose. Pop-up de newsletter, en-tête collant, barre latérale :

/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
  display: none !important;
}

/* Some pop-ups freeze scrolling — restore it */
html, body {
  overflow: auto !important;
}

Le mot-clé !important indique au navigateur que votre règle l'emporte sur le CSS propre du site. Vous en aurez souvent besoin lorsque vous remplacez un design existant.

Exemple 2 — restyler pour la lisibilité

Rendre un article confortable à lire — texte plus grand, plus d'interligne, une colonne plus étroite :

/* Comfortable reading column */
article, .post-content {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

Exemple 3 — un ajustement sombre rapide

Un simple fond sombre pour une page d'un blanc éclatant :

/* Minimal dark tweak */
html, body {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }

Les thèmes sombres complets sont plus complexes — beaucoup d'éléments à recolorer — mais cela suffit pour atténuer une page trop lumineuse.

Conseils pour un CSS qui ne casse pas

Préférez masquer plutôt que supprimer. display: none est réversible — il suffit de désactiver la règle.
Ciblez vos règles. Un motif d'URL précis vaut mieux que * — cela évite les surprises sur des sites sans rapport.
Testez d'abord en direct. Utilisez le panneau CSS dans l'onglet ou les DevTools pour confirmer un sélecteur avant de l'enregistrer.
Évitez les sélecteurs d'attribut trop larges comme [class*="box"] — ils peuvent correspondre à bien plus que ce que vous voulez.

Le panneau CSS dans l'onglet de JustZix est pratique ici : vous modifiez, la page se met à jour pendant que vous tapez, et lorsque cela vous convient vous l'enregistrez comme règle. Voyez la page des fonctionnalités pour le reste de la boîte à outils.

À voir aussi

Prêt à rendre votre CSS personnalisé permanent ? JustZix est gratuit et s'installe en quelques minutes — récupérez-le sur la page de téléchargement et créez votre première règle dès aujourd'hui.

Notez cet article

Aucune note — soyez le premier.