27802 sujets

CSS et mise en forme, CSS3

Bonjour à vous,

Existe-t-il une différence fondamentalement entre déclarer des propriétés CSS dans le <body> et dans le <html> ?

Par exemple, si je veux qu'une famille de police de caractères soit utilisée pour toute une page web, que se soit dans le <header>, la <section> ou le <footer> (quand aux différents styles ils seront précisés dans des classes précises) est-ce qu'il vaut mieux que je déclare dans la CSS :
font-family: Georgia, serif;
en ciblant le sélecteur <body> ou le sélecteur <html> ?
Modifié par ObiJuanKenobi (25 Apr 2022 - 10:29)
Administrateur
Hello,

Fondamentalement, l'un est le fils de l'autre Smiley cligne

<html> a deux enfants (<head> et <body>). Sachant que tu ne vas pas afficher <head> (qui ne contient que des métadonnées), il est peu judicieux d'appliquer des styles de police sur <html> même si rien ne t'en empêche.

En général, on réserve le sélecteur html pour les variables CSS ou des styles très globaux comme le box-sizing notamment.

EDIT : par contre, si tu utilises des tailles de police (ou de boîtes ou de media queries) en "rem", ces tailles feront référence à la taille de police de <html> et non <body> donc il faudra être attentif à cela et éventuellement modifier la taille de police de HTML.
Modifié par Raphael (25 Apr 2022 - 11:27)
Merci Raphael, c'est clair maintenant.

Cela veut dire que si je veux utiliser la même police de caractères pour toute une page web, je dois déclarer la font-family en ciblant <html> ?
Modifié par ObiJuanKenobi (25 Apr 2022 - 13:19)
Relis bien sa suggestion : Raphaël te propose de définir les familles de polices sur le body et de régler leurs tailles sur le tag html.

Personnellement je mets tout sur le tag html. On peut aussi mettre les variables CSS globales sur :root.