Il existe plusieurs types de propriétés CSS à considérer : des valeurs numériques aux couleurs, jusqu'aux fonctions accomplissant une action particulière (comme charger une image de fond ou appliquer une rotation sur un élément). Certaines d'entre elles attendent des unités particulières pour définir les valeurs exactes qui les représentent — voulez-vous que la boîte  ait une largeur de 30 pixels, de 30 centimètres, ou de 30 ems ? Dans ce guide, nous examinerons les valeurs les plus courantes, comme la longueur, la couleur et les fonctions simples. Nous aborderons aussi d'autres unités moins courantes, telles que les degrés et même les valeurs numériques sans unité.

Prérequis : Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML) et une idée sur le fonctionnement des CSS.(voir les articles précédents de ce module.)
Objectif : Apprendre les  types les plus courants de valeurs des  propriétés des CSS et leurs unités associées.

Il existe plusieurs types de valeurs dans les CSS, certaines d'entre elles très courantes, d'autres plus rares. Dans cet article, nous ne les traiterons pas toutes de façon exhaustive ; uniquement celles que vous serez susceptibles de trouver les plus utiles dans votre parcours pour maitriser les CSS. Dans cet article, nous aborderons donc les valeurs de CSS suivantes :

  • les valeurs numériques : valeurs de longueur pour définir, par ex. la largeur d'un élément, l'épaisseur d'une encadrement, une taille de police et des entiers sans unité pour indiquer, par ex. la largeur relative d'une ligne, ou le nombre d'itérations d'une animation.
  • les pourcentages : ils s'utilisent aussi pour définir une taille ou une longueur — par rapport à la largeur ou la hauteur du conteneur parent ou à la taille de police par défaut.
  • les couleurs : pour préciser la couleur de fond, la couleur du texte, etc.
  • les coordonnées de positions : par ex. pour définir l'emplacement d'un élément par rapport à l'angle supérieur gauche de l'écran.
  • les fonctions :  pour spécifier des images de fond par exemple ou des dégradés.

Vous verrez aussi des exemples d'utilisation de ces unités tout au long de votre parcours dans ce guide sur les CSS, mais aussi dans toutes les autres ressources des CSS que vous pourrez consulter. Vous vous approprierez ainsi ces notions en un rien de temps.

Note : vous trouverez un traitement exhaustif des unités des CSS dans  Référence des CSS ; les unités sont les entrées entourées par des crochets <>,  par exemple <color>.

Valeurs numériques

Vous verrez que les nombres sont largement utilisés dans les unités CSS. Cette section aborde les types de valeurs numériques les plus courants.

Longueur et taille

Vous utiliserez très souvent les unités de longueur/taille (voir <length> en référence)  dans vos CSS pour la mise en page, typographie et plus. Regardons cet exemple simple — tout d'abord le HTML:

<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>

Et maintenant le CSS :

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

Le résultat est le suivant :

Dans ce code, nous définissons :

  • les margin (marges), padding (remplissages) et border-width (épaisseurs de trait d'encadrement) de chaque paragraphe à respectivement 5 pixels, 10 pixels et 2 pixels. Une valeur unique pour la marge ou le remplissage signifie que ces grandeus seront identiques sur les quatre côtés. L'épaisseur de trait de l'encadrement est définie par la valeur donnée pour le raccourci border.
  • la width (largeur) des trois paragraphes à des valeurs en pixels de plus en plus grandes, signifiant que plus on va vers le bas, plus les boîtes seront larges.
  • la font-size (taille de police)  des trois paragraphes avec des valeurs en pixel de plus en plus grandes, ce qui implique que la taille du texte sera de plus en plus grande à mesure que l'on descend dans la page. font-size (taille de police) fait référence à la hauteur de chaque caractère.

Les pixels (px) sont appelés unités absolues car ils auront toujours la même taille indépendamment des autres paramètres associés. Les autres unités absolues sont :

  • mm, cm, in: millimètres, centimètres et pouces (inches).
  • pt, pc: points (1/72 de pouce) ou picas (12 points.)

Vous n'utiliserez probablement pas ces unités très souvent, sauf les pixels.

Il y a aussi des unités relatives, par rapport à la taille de police (font-size) de l'élément courant ou à celle de la vue (viewport) :

  • em: 1em est identique à la taille de police de l'élément actuel (plus précisément, la largeur du M majuscule, d'où le nom). La taille de police font-size par défaut d'une page web, donnée par les navigateurs avant application des styles des CSS est de 16 pixels, donc la valeur calculée de 1em est de 16 pixels pour un élément par défaut. Mais attention — les tailles de police des éléments sont héritées de leurs parents, donc si des tailles de police différentes ont été définies sur des éléments parents, l'équivalent en pixels d'un em peut commencer à devenir compliqué. Ne vous inquiétez pas trop à ce sujet pour l'instant — nous passerons en revue les notions d'héritage et de taille des polices plus en détail dans les articles et les modules suivants. Les em sont l'unité relative la plus courante que vous utiliserez dans le développement web.
  • ex, ch: il s'agit respectivement de la hauteur d'un x minuscule, et de la largeur du chiffre 0. Ces unités ne sont pas aussi couramment utilisées ni aussi bien prises en charge que les ems.
  • rem: l'unité rem (root em) fonctionne exactement comme em, sauf qu'elle sera toujours égale à la taille de la police font-size par défaut ; les tailles de police héritées n'auront aucun effet, donc cela semble être une bien meilleure option que em, bien que  rem ne fonctionne pas dans les anciennes versions d'Internet Explorer (pour en savoir plus sur le support multi-navigateur, voir Debugging CSS.)
  • vw, vh : représentent respectivement un centième de la largeur de la vue (viewport) et un centième de sa hauteur. Là aussi, ces unités ne sont pas aussi communément prises en charge que les rem.

L'usage d'unités relatives est très utile — vous pouvez dimensionner les éléments HTML en fonction de la police ou de la taille de la fenêtre, ce qui signifie que la disposition restera correcte si la taille du texte est doublée sur l'ensemble du site par un utilisateur malvoyant.

Valeurs sans unité

Dans les CSS , vous pourrez parfois rencontrer des valeurs non accompagnées d'une unité — il ne s'agit pas toujours d'une erreur, en fait, cela est autorisé dans certaines circonstances. Par exemple, si vous voulez totalement supprimer la marge (margin) ou le remplissage (padding) d'un élément, vous pouvez simplement utiliser le 0 sans unité — 0 c'est 0,  peu importe l'unité précédemment choisie !

margin: 0;

Hauteur de ligne sans unité

Autre exemple avec line-height qui définit la hauteur de chaque ligne de texte d'un élément. Vous pouvez utiliser des unités pour donner une hauteur de ligne donnée, mais il est souvent plus facile d'utiliser une valeur sans unité agissant comme un simple coefficent multiplicateur. Prenons par exemple le code HTML suivant : 

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

Et le CSS suivant :

p {
  line-height: 1.5;
}

Ceci va donner le résultat suivant :

Ici, font-size vaut 16px ; la hauteur de ligne sera 1,5 fois font-size, soit 24 px.

Nombre d'animations

Les animations des CSS permettent d'animer des éléments HTML d'une page. Regardons un simple exemple d'animation qui applique une rotation à un paragraphe lorsque ce dernier est survolé avec la souris. Le HTML pour cet exemple est relativement simple :

<p>Hello</p>

La CSS est un peu plus compliquée :

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

 

Ici, vous pouvez voir un certain nombre d'unités intéressantes dont nous ne parlerons pas explicitement dans cet article (<angle>, <time>, <timing-function>, <string>...), mais celle qui nous intéresse ici figure à la ligneanimation-iteration-count: 5; — elle précise le nombre de fois où cette animation doit être reproduite (dans ce cas-ci,  lorsque le paragraphe est survolé avec la souris) et il s'agit d'un simple nombre entier sans unité (integer, en langage informatique).

Nous obtenons ainsi le résultat suivant :

Pourcentages

Vous pouvez également utiliser des valeurs de pourcentage pour spécifier la plupart des données définissables par des valeurs numériques. Cette façon de procéder permet, par exemple, de créer des boîtes de largeur variable en pourcentage de celle du conteneur parent, par opposition aux boîtes de largeur définie avec une valeur d'unité (comme px ou em), boîtes qui conservent toujours la même taille même si celle du conteneur parent change.

Un exemple pour expliquer le propos :

D'abord, deux boîtes similaires, définis en HTML:

<div>
  <div class="boxes">Disposition de largeur fixe définie en pixels</div>
  <div class="boxes">Disposition fluide définie en pourcentage</div>
</div>

Et maintenant un peu de CSS pour les styliser :

div .boxes {
  margin: 10px;
  font-size: 150%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

Ce qui nous donne le résultat suivant :

Ici, nous définissons pour tous les boîtes une marge margin,  une hauteur height, une taille de police font-size, un encadrement border ainsi qu'une couleur color. Puis nous donnons à chacune des div des couleurs de remplissage background-color différentes pour bien les diférencier. Nous définissons aussi la largeur width de la première div à 650px et celle de la deuxième à 75%. La première div a toujours la même largeur, même si la fenêtre est redimensionnée (la première div commence à disparaitre quand la fenêtre devient moins large que le bloc), alors que la largeur de la deuxième div change en même temps que change la largeur de la fenêtre, de telle sorte que la boîte fasse 75% de la largeur de son parent. Dans ce cas, le parent de la div est l'élément <body>, qui par défaut vaut 100% de la largeur de la vue.

Note : Vous pouvez constater ce comportement en activité en redimensionnant la fenêtre du navigateur contenant cet article ; essayez aussi de faire la même chose sur les exemples bruts trouvés sur Github.

Nous avons aussi défini une taille de police font-size avec une valeur en pourcentage : 150%. Ce fonctionnement est légérement différent de ce à quoi s'attendre, mais cela a du sens — là encore, cette taille est relative à la taille de la police du parent, défini en ems. Dans notre cas, la taille de police du parent est de 16px —  valeur par défaut pour la page, donc la valeur calculée sera 150% de celle-ci, soit 24px. Cela fonctionne en fait d'une manière très similaire aux ems — concrètement 150% est l'équivalent de 1.5ems.

Ces deux types de mise en page sont souvent appelées mise en page fluide (change avec la taille de la vue du navigateur) et mise en page fixe (reste le même en tout cas). Les deux ont des utilisations différentes, par exemple :

  • une mise en page fluide s'utilisera pour être sûrs qu'un document standard s'adaptera toujours à l'écran et s'affichera correctement sur toute taille d'écran de périphérique mobile.
  • une mise en page s'utilisera pour garder une taille constante à une carte géographique en ligne ; il est alors possible de faire défiler la carte dans la vue du navigateur en affichant seulement une certaine étendue à la fois. L'étendue que vous pouvez voir en une fois dépend de la taille de la vue d'affichage.

Nous vous en dirons plus à ce sujet ultérieurment avec la mise en page à l'aide des CSS et le design adaptatif.

Apprentissage actif : jouer avec les longueurs

Pour cet exercice, il n'y a pas de bonnes réponses. Essayez simplement de jouer avec la largeur width et la hauteur height des div .inner et .outer pour constater les effets que peuvent avoir ces divers types de valeurs : définissez une valeur en pourcentage pour la largeur de la div  .inner et voyez comme elle s'ajuste lorsque la div  .outer change. Essayez  avec des unités de valeurs fixes aussi, comme les pixels et les ems.

Si vous vous trompez, vous pouvez toujours reprendre à zéro avec le bouton Réinitialiser.

Couleurs

Il existe plusieurs façons de définir une couleur avec des CSS, certaines ont été implémentées plus récemment que d'autres. Les valeurs de couleur s'utilisent partout de la même manière dans les CSS, que ce soit  pour du texte, un arrière-plan ou tout autre élément.

Le système couleur standard disponible sur les ordinateurs modernes est sur 24 bits, ce qui permet d'afficher environ 16,7 millions de couleurs distinctes en combinant les  différents canaux rouge, vert et bleu avec 256 valeurs différentes par canal (256 x 256 x 256 = 16 777 216).

Parcourons les différents types de valeurs de couleur disponibles.

Note : pour faire la conversion entre les différents systèmes de couleur abordés ci-dessous, vous aurez besoin d'un convertisseur de couleur. Il y a beaucoup de convertisseurs faciles à trouver en ligne, tels que HSL to RGB / RGB to HSL / Hex Colour Converter.

Mots-clés

Les types de couleurs les plus simples et les plus anciens dans les CSS sont les mots-clés de couleur. Ce sont des chaînes littérales spécifiques représentant des valeurs de couleur particulières. Par exemple, le code suivant :

<p>Ce paragraphe est sur fond rouge.</p>
p {
  background-color: red;
}

donne :

Les mots-clés de couleur sont très faciles à comprendre, bien qu'ils ne permettent que de spécifier des primitives de couleur évidentes. Il existe environ 165 mots-clés différents disponibles dans les navigateurs Web modernes — voir la liste complète des mots-clés de couleurs.

Valeurs hexadécimales

Le système universel de couleurs qui suit est celui des couleurs exprimées avec un nombre sous forme hexadécimale, ou codage hexadécimal. Chaque valeur hexadécimale est constituée d'un croisillon (#) suivi de six chiffres hexadécimaux, dont chacun peut prendre une valeur comprise entre 0 et f (qui représente 15) — donc 0123456789abcdef. Chaque paire de valeurs représente l'un des canaux — rouge, vert et bleu — et permet de définir l'une des 256 valeurs disponibles pour chacune (16 x 16 = 256).

Ainsi, par exemple, ce code :

<p>Ce paragraphe est sur fond rouge.</p>
<p>Ce paragraphe est sur fond bleu.</p>
<p>Ce paragraphe a pour fond une sorte de rose lilas.</p>
/* équivalent du mot-clé rouge */
p:nth-child(1) {
  background-color: #ff0000;
}

/* équivalent du mot-clé bleu */
p:nth-child(2) {
  background-color: #0000ff;
}

/* pas de mot-clé exactement équivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Donne le résultat suivant : 

Les valeurs héxadécimales sont un peu plus complexes et moins faciles à comprendre, mais elles sont beaucoup plus polyvalentes que les mots-clés — vous pouvez utiliser des valeurs hexadécimales pour représenter n'importe quelle couleur que vous souhaitez utiliser dans votre palette.

RGB

Le troisième schéma de couleur dont nous parlerons ici est le RVB. Une valeur RVB est une fonction — rgb() — qui reçoit trois paramètres représentant les valeurs des canaux rouge, vert et bleu des couleurs, de la même manière que les valeurs hexadécimales. La différence avec RVB est que chaque canal est représenté non pas par deux chiffres hexadécimaux, mais par un nombre décimal compris entre 0 et 255.

Réécrivons le dernier exemple en utilisant le système de couleurs RVB :

<p>Ce paragraphe est sur fond rouge.</p>
<p>Ce paragraphe est sur fond bleu.</p>
<p>Ce paragraphe a pour fond une sorte de rose lilas.</p>
/* équivalent du mot-clé rouge */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* équivalent du mot-clé bleu */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* pas de mot-clé exactement équivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Ce qui donne le résultat suivant :

Le système RVB est pratiquement aussi bien pris en charge que les valeurs hexadécimales — vous ne rencontrerez probablement aucun navigateur ne les supportant pas dans votre travail. Les valeurs RVB sont sans doute un peu plus intuitives et faciles à comprendre que les valeurs hexadécimales.

Note: Pourquoi 0 à 255 et non 1 à 256 ? Les systèmes informatiques commencent leurs décompte à partir de 0 et non de 1. Donc, pour avoir 256 valeurs possibles, RVB prend ses valeurs dans la plage 0-255 bornes incluses.

HSL

Le modèle HSL est un peu moins bien pris en charge que RVB (il ne l'est pas sur les anciennes versions de IE). Il a été mis en œuvre à cause du grand intérêt que lui portent les désigners — au lieu des valeurs de rouge, vert et bleu, la fonction hsl() prend des valeurs de teinte (hue), saturation et luminosité utilisées pour distinguer les 16,7 millions de couleurs, mais d'une manière différente :

  1. Teinte : la teinte de base de la couleur. Elle est représentée par une valeur comprise entre 0 et 360, correspondant à un angle sur la roue des couleurs.
  2. Saturation : quel est le degré de saturation de la couleur ? Elle est représentée par une valeur comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de couleur (elle  correspond à du gris) et 100% indique la saturation totale en couleur.
  3. Luminosité : Quelle est la brillance de la couleur ? Elle est représentée par une valeur comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de lumière (noir complet donc) et 100% indique la pleine lumière (totalement blanc donc).

Note : Une roue HSL est utile pour visualiser le fonctionnement de ce modèle de couleur. Voir l'article HSL et HSV sur Wikipedia.

Nous allons maintenant réécrire notre exemple en utilisant les couleurs HSL :

<p>Ce paragraphe est sur fond rouge.</p>
<p>Ce paragraphe est sur fond bleu.</p>
<p>Ce paragraphe a pour fond une sorte de rose lilas.</p>
/* équivalent du mot-clé rouge */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* équivalent du mot-clé bleu */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* pas de mot-clé exactement équivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

donne le résultat suivant :

Le modèle de couleur HSL est assez intuitif pour les désigners qui ont l'habitude de travailler avec de tels modèles de couleur. Il est utile, par exemple, pour trouver un ensemble de nuances seyantes dans un schéma de couleurs monochrome :

/* trois nuances différentes de rouge */
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA et HSLA

RGB et HSL ont tous deux des modes correspondants — RGBA et HSLA — qui vous permettent de définir non seulement la couleur à afficher, mais aussi sa transparence. Leurs fonctions correspondantes prennent les mêmes paramètres, plus une quatrième valeur dans la plage 0 à 1 — qui définit la transparence, ou canal alpha. 0 indique la transparence totale et 1 l'opacité complète.

Voici un autre exemple rapide — d'abord le HTML:

<p>Ce paragraphe est sur un fond rouge transparent.</p>
<p>Ce paragraphe est sur un fond bleu transparent.</p>

Maintenant, le CSS — ici nous déplaçons le premier paragraphe vers le bas en le plaçant pour montrant l'effet de la superposition des paragraphes (vous en apprendrez plus sur le positionnement ultérieurement) :

p {
  height: 50px;
  width: 350px;
}

/* rouge transparent */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* bleu transparent */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Voici le résultat :

Les couleurs transparentes sont très utiles pour des effets visuels plus riches — mélange d'arrière-plans, d'éléments d'interface utilisateur semi-transparents, etc.

Note : Le placement dans les CSS est exposé plus loin dans ce cours.

Opacité

Il existe un autre moyen de définir la transparence avec les CSS : la propriété opacity. Au lieu de définir la transparence d'une couleur donnée, cette propriété définit l'opacité de tous les éléments sélectionnés et de leurs enfants. Voyons un exemple pour voir la différence.

<p>Ca paragraphe utilise RGBA pour définir la transparence</p>
<p>Ce paragraphe utilise la propriété opacity </p>

Maintenant le CSS :

/* Rouge avec RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Rouge avec opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Voici le résultat :

Notez la différence — le premier bloc, qui utilise la couleur RGBA, a seulement un fond semi-transparent, alors que tout dans la deuxième boîte est transparent, y compris le texte. Pensez-y au moment de l'utiliser — par exemple RGBA est utile lorsque vous voulez créer une légende d'image superposée où l'image s'affiche à travers la zone de légende mais que le texte est toujours lisible. l'opacité, d'un autre côté, est utile lorsque vous voulez créer un effet d'animation dans lequel un élément entier de l'interface utilisateur va de complètement visible à masqué.

Apprentissage actif : jouer avec les couleurs

Pour cet exercice, il n'y a pas de bonne réponse. Essayez simplement de jouer avec les valeurs de background-color pour les trois boîtes ci-dessous légèrement superposées les unes sur les autres. Essayez les valeurs en mots-clés, en hexadécimal, en RVB / HSL / RGBA / HSLA et la propriété opacity. Amusez-vous bien !

En cas d'erreur, vous pouvez toujours recommencer à zéro grâce au bouton Réinitialiser.

Fonctions

En programmation, une fonction est une portion de code réutilisable pouvant être executée plusieurs fois pour réaliser une tâche répétitive avec un minimum d'effort de la part du développeur et de la machine. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++, mais elles existent aussi dasn les CSS, en tant que valeurs de propriété. Nous avons déjà vu des fonctions en action dans la section Couleurs avec rgb(), hsl(), etc. :

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Ces fonctions calculent la couleur à utiliser.

Mais vous verrez aussi des fonctions à d'autres endroits — à chaque fois que vous voyez un nom avec des parenthèses après, contenant une ou plusieurs valeurs séparées par des virgules, c'est que vous avez affaire à une fonction. Par exemple :

/* calculer la nouvelle position d'un élément après rotation de 45 degrés */
transform: rotate(45deg);
/* calculer la nouvelle position d'un élément après translation de 50px vers la droite et 60px vers le bas */
transform: translate(50px, 60px);
/* calculer une nouvelle valeur de largeur égale à 90% de la largeur actuelle moins 15px */
width: calc(90%-15px);
/* aller chercher sur le réseau une image à utiliser en arrière-plan */
background-image: url('myimage.png');

Il y a beaucoup de fonctionnalités bien utiles et passionnantes avec les CSS ; vous les apprendrez en temps voulu !

Résumé

Nous espérons que vous avez apprécié cet exposé sur les valeurs et les unités CSS. Ne vous inquiétez pas si cela ne vous semble pas tout à fait logique. Vous finirez par vous approprier ces fondamentaux de la syntaxe CSS à mesure que vous avancerez dans votre pratique !

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, codingk8, drenawak
Dernière mise à jour par : Dralyab,