CSS

Le CSS décide de l'apparence de chaque page : couleurs, polices, marges, colonnes, affichage sur téléphone. Même avec WordPress ou Divi, qui l'écrivent pour vous, quelques lignes de CSS suffisent souvent à régler un détail que les options ne permettent pas. Cette page explique comment se lit une règle CSS, où l'ajouter sur votre site, et rassemble des codes prêts à copier, à commencer par la largeur « 100% moins une largeur fixe » avec calc().

Le CSS (Cascading Style Sheets, « feuilles de style en cascade ») est le langage qui ajoute du style aux pages Web : polices, couleurs, espacements. Le HTML décrit la structure du document, le CSS définit sa présentation visuelle. C'est un standard du W3C, l'organisme qui normalise le Web. Les codes ci-dessous s'ajoutent à la feuille de style de votre site.

Une feuille de style est une suite de règles. Chaque règle dit : « pour tels éléments, applique telle apparence ». Par exemple :

• le sélecteur (h2) désigne les éléments visés : une balise (h2, p), une classe (.bouton-promo, avec un point) ou un identifiant (#contact, avec un dièse) ;

• entre les accolades, chaque déclaration associe une propriété (color, la couleur du texte) à une valeur (#1e3a5f), séparées par deux-points et terminées par un point-virgule ;

• le texte entre /* et */ est un commentaire : le navigateur l'ignore, il sert à vous rappeler pourquoi la règle existe.

Les unités les plus courantes : px (pixels, une taille fixe), % (une part de l'élément parent), em et rem (relatives à la taille du texte), vw et vh (une part de la largeur ou de la hauteur de la fenêtre : 1vw vaut 1% de sa largeur).

Plusieurs règles visent souvent le même élément : celles du navigateur, du thème, des extensions, puis les vôtres. Le navigateur les départage selon trois critères, dans cet ordre :

• l'importance : une déclaration suivie de !important passe devant les autres ;

• la spécificité : le sélecteur le plus précis l'emporte. Un identifiant (#contact) pèse plus qu'une classe (.bouton), qui pèse plus qu'une balise (a) ;

• l'ordre : à précision égale, la dernière règle lue gagne. C'est pour cela que le CSS ajouté après celui du thème peut le corriger.

Quand votre règle ne s'applique pas, c'est presque toujours qu'une autre règle plus précise la bat : l'inspecteur du navigateur affiche alors votre déclaration barrée. Mieux vaut rendre votre sélecteur un peu plus précis (.ma-section h2 au lieu de h2) que d'ajouter !important partout. Le calcul exact est détaillé dans la page spécificité de MDN.

Sur un site WordPress, ne modifiez pas les fichiers du thème lui-même : ils sont remplacés à chaque mise à jour du thème, et vos modifications avec. Utilisez plutôt l'un de ces emplacements :

• thème classique : Apparence > Personnaliser > CSS additionnel. Le rendu s'affiche dans l'aperçu pendant que vous tapez, avant de publier ;

• thème par blocs (Twenty Twenty-Five, par exemple) : Apparence > Éditeur > Styles, puis le menu à trois points en haut du panneau et CSS additionnel (emplacement en vigueur depuis WordPress 6.9) ;

• Divi : six emplacements possibles, du CSS de tout le site à celui d'un seul module, détaillés dans ajouter ou modifier du CSS personnalisé dans Divi ;

• thème enfant : son fichier style.css, pratique quand le CSS dépasse quelques dizaines de lignes (voir avez-vous besoin d'un thème enfant ?) ;

• une extension de snippets comme WPCode, qui range dans une seule liste le CSS, le JavaScript et le PHP ajoutés au site, chaque morceau de code pouvant être activé ou désactivé séparément. Sa version gratuite est sur le répertoire officiel de WordPress.

Pour savoir quoi cibler, faites un clic droit sur l'élément puis « Inspecter » : l'inspecteur affiche ses classes et vous laisse tester une modification en direct avant de l'enregistrer. Tout est expliqué dans inspecter un élément dans une page Web.

Chaque code ci-dessous se colle tel quel dans l'un des emplacements vus plus haut. Ceux qui commencent par un point (.calculated-width, .contenu-limite…) visent une classe : ajoutez ce nom, sans le point, à l'élément concerné, dans le champ « Classe(s) CSS additionnelle(s) » des réglages avancés d'un bloc WordPress ou dans les réglages avancés du module sous Divi.

Voici une formule CSS pour donner une largeur calculée en fonction d'une largeur totale à laquelle on soustrait une largeur fixe :

Mise à jour octobre 2026 : les premières versions de ce code ajoutaient deux lignes préfixées avant la ligne standard, width: -moz-calc(100% - 100px); et width: -webkit-calc(100% - 100px);. Elles ne servent plus à rien : calc() sans préfixe fonctionne dans Firefox depuis la version 16 (2012), dans Chrome depuis la version 26 (2013), dans Safari depuis la version 7 (2013) et dans Edge depuis sa première version (2015), et Firefox ne reconnaît même plus -moz-calc() depuis sa version 53 (2017). Source : tableau de compatibilité de la page calc() de MDN.

Concrètement, 100% vaut la largeur de l'élément parent, et les 100 pixels sont retirés quelle que soit la taille de l'écran. Exemple typique : une colonne de contenu posée à côté d'une barre latérale de 100 pixels, qui doit occuper tout le reste de la ligne. calc() mélange librement les unités : calc(100vh - 80px) donne la hauteur de la fenêtre moins un en-tête de 80 pixels, calc(100% / 3) le tiers de la largeur disponible.

Deux pièges : les signes + et - doivent être entourés d'espaces (calc(100%-100px) est invalide et la déclaration entière est ignorée), alors que * et / peuvent s'en passer ; et chaque nombre additionné ou soustrait porte son unité (calc(100% - 100) ne fonctionne pas). Sources : spécification CSS Values du W3C et MDN.

Pour un bloc de texte qui ne dépasse jamais 700 pixels sur grand écran mais occupe toute la largeur sur un téléphone :

min() retient la plus petite des valeurs : 700 pixels sur un ordinateur, 100% de la largeur sur un écran plus étroit. margin: 0 auto centre le bloc. max() fait l'inverse et retient la plus grande valeur.

clamp() prend trois valeurs : un minimum, une valeur idéale et un maximum. Ici, le titre grandit avec la largeur de la fenêtre (3vw), sans descendre sous 1,5rem sur un téléphone ni dépasser 3rem sur un grand écran : plus besoin d'écrire une taille par format d'écran. Pour que le texte reste lisible quand un visiteur zoome, MDN conseille un maximum en unité relative (rem) au moins deux fois plus grand que le minimum, comme dans cet exemple.

La grille place autant de colonnes d'au moins 250 pixels que la largeur le permet, puis partage l'espace restant à parts égales (1fr). Sur un ordinateur, plusieurs cartes s'alignent ; sur un téléphone, elles s'empilent, sans aucune règle @media. gap règle l'espace entre les cartes. La classe se pose sur le bloc parent (un groupe, une section), pas sur chaque carte.

Par défaut, la largeur donnée à un élément ne compte que son contenu : les marges intérieures (padding) et la bordure s'y ajoutent. Un bloc à width: 100% avec 20 pixels de padding de chaque côté déborde donc de 40 pixels, et un calcul comme calc(100% - 100px) tombe faux. Avec border-box, la largeur annoncée inclut le padding et la bordure. Votre thème l'applique peut-être déjà : vérifiez la valeur de box-sizing dans l'inspecteur (onglet Calculés) avant d'ajouter ce code.

Le contenu de la règle @media ne s'applique que sur les écrans de 767 pixels de large ou moins. Inversez la condition avec min-width: 768px pour masquer un élément sur ordinateur seulement. Divi et la plupart des constructeurs de pages ont leurs propres options de visibilité par appareil : utilisez-les en priorité, elles sont plus faciles à retrouver. Un élément masqué reste dans le code de la page et il est toujours téléchargé. Pour aller plus loin sur l'affichage mobile : responsive.

Dans les anciens tutoriels, beaucoup de propriétés apparaissent en trois exemplaires : -webkit- (Chrome, Safari), -moz- (Firefox), puis la version standard. Ces préfixes de fabricant permettaient aux navigateurs de proposer une fonctionnalité avant sa normalisation. Les navigateurs ont abandonné cette pratique : les fonctionnalités expérimentales se testent maintenant derrière une option à activer dans le navigateur (MDN, « Préfixe de fournisseur »). Les propriétés courantes, comme calc(), les coins arrondis (border-radius), les ombres (box-shadow), les transitions ou flexbox, fonctionnent sans préfixe dans tous les navigateurs principaux depuis 2015.

En pratique : quand vous reprenez un vieux code, gardez la ligne sans préfixe et supprimez les lignes préfixées de la même propriété, après un coup d'œil au tableau « Compatibilité des navigateurs » en bas de la page MDN de la propriété. Quelques propriétés non standard n'existent encore qu'avec un préfixe : ce même tableau l'indique.

Le CSS a beaucoup progressé depuis l'époque où il fallait des astuces pour centrer un bloc verticalement. MDN indique pour chaque fonctionnalité la date à laquelle elle est arrivée dans tous les navigateurs principaux (Chrome, Edge, Firefox et Safari), sous le nom Baseline. Voici celles qui changent le quotidien, toutes utilisables sans préfixe :

Source : pages de référence de MDN, données Baseline relevées en octobre 2026. Un visiteur dont le navigateur n'a pas été mis à jour depuis des années peut ne pas voir les fonctionnalités les plus récentes.

• Modifier les fichiers du thème : vos changements disparaissent à la mise à jour suivante. Passez par le CSS additionnel, un thème enfant ou une extension de snippets.

• Oublier une accolade ou un point-virgule : la suite du code est mal lue et des règles cessent de s'appliquer, sans message d'erreur. Le validateur CSS du W3C repère ces fautes.

• Un sélecteur trop large : p { font-size: 18px; } change tous les paragraphes du site, pied de page et formulaires compris. Visez une classe.

• Mettre `!important` partout : chaque correction suivante en demandera un autre. Réservez-le aux cas où le thème ou une extension en utilise déjà un.

• Croire que le CSS ne fonctionne pas alors que c'est le cache : rechargez la page avec Ctrl+F5 (Cmd+Maj+R sur Mac) et videz le cache de votre extension de cache.

• Tester seulement sur ordinateur : vérifiez chaque modification en mode responsive dans l'inspecteur, puis sur un vrai téléphone.

• Recopier les lignes préfixées d'un vieux tutoriel : elles alourdissent le code sans rien apporter (voir plus haut).

• La documentation CSS de MDN, en français : la référence complète, chaque propriété avec des exemples et son tableau de compatibilité.

• Bases de la mise en forme CSS, le cours progressif de MDN pour débuter.

• Le validateur CSS du W3C : collez votre code ou l'adresse d'une page pour repérer les erreurs de syntaxe.

• Sur ce site : HTML, JavaScript, la leçon Comment est fait le contenu du Web (HTML & CSS), le tutoriel superposer une image de fond dans un texte en CSS, et les autres notes de la rubrique Dév.