Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant Différents types de sélecteurs. Dans ce tuto , nous allons voir Les couleurs et les Unités CSS .

Les couleurs HTML et CSS

Dans cette nouvelle leçon, nous allons apprendre à modifier la couleur et l’opacité de nos textes grâce à la propriété color que nous avons déjà rencontré précédemment.

Cette propriété est à la fois très simple à utiliser et relativement complexe à parfaitement maîtriser car nous allons lui passer des valeurs de couleurs très différentes les unes des autres.

Les navigateurs admettent 3 méthodes possibles pour la déclaration d’une couleur :

• Couleurs nommées : « background-color: grey » La couleur est désignée par son nom. Il n’y a que 16 noms de couleurs normalisés par le W3C, mais tous les navigateurs actuels reconnaissent les couleurs définies par la norme X11
• Couleurs en hexadecimal : « background-color: #808080 » La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.
• Couleurs décomposées : « background-color: RGB( 128,128,128 ) »La couleur est définie par trois nombres décimaux de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.

Voyons en pratique comment utiliser ces noms de couleurs en CSS avec différents exemples utilisant color en CSS :

<h1>Un titre de niveau 1</h1>
        
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>

h1{
    color: orange;
}

.p1{
    color: red;
}

.p2{
    color: blue;
}

Illustrons immédiatement avec quelques exemples le fonctionnement des notations RGB en CSS.

<h1>Les notations RGB en CSS</h1>

<p>On va pouvoir <strong>créer une couleur RGB en CSS</strong> en mixant différentes intensités de Rouge, de Vert, et de Bleu.</p>

<p><em>L'intensité</em> de chacune de ces couleurs de base doit être comprise entre <em>0 (intensité minimale)</em> et <em>255 (intensité maximale)</em>.</p>

h1{
  color : RGB(255, 180, 0);
}

p{
  color : RGB(50, 50, 50);
}

strong{
  color : RGB(0, 0, 200);
}

em{
  color : RGB(0, 200, 50);
}

Nous allons en effet pouvoir utiliser les notations hexadécimales pour créer une couleur avec la propriété CSS color. Les valeurs hexadécimales sont même les plus utilisées en CSS pour créer des couleurs !

Nous allons ici utiliser exactement le même principe qu’avec les valeurs RGB en précisant trois intensités de Rouge, Vert et Bleu pour créer une couleur. Là encore, chacune des trois intensités des couleurs de base va pouvoir être comprise entre 0 et 255 ou plus exactement entre 00 et FF en notation hexadécimale (FF en hexadécimal est équivalent à 255 en décimal).

Pour créer une couleur en utilisant les notations hexadécimales en CSS, nous allons donc devoir préciser trois intensités de Rouge, Vert et de Bleu entre 00 et FF à la suite. De plus, nous devrons faire précéder cette notation par un dièse (symbole #).

Prenons immédiatement quelques exemples pour illustrer cela :

<h1>Les notations hexadécimales en CSS</h1>

<p>La propriété <strong>CSS color</strong> accepte également des valeurs hexadécimales.</p>

<p>Le système hexadécimal signifie "qui fonctionne en base 16". C'est simplement une autre façon de compter <span>(de 16 en 16)</span> par rapport au système décimal <span>(qui compte de 10 en 10)</span>.</p>

/*Intensité max de rouge, médiane de vert, et pas de bleu*/
h1{
  color : #FF8800;
}

/* Rouge pur : intensité max de rouge, pas de vert ni de bleu*/
strong{
  color : #FF0000;
}

/*Grande intensité de rouge et de bleu, petite intensité de vert*/
span{
  color : #B904B9;
}

On applique une color : #FF8800 à notre titre h1 en CSS. On utilise ici une intensité maximale de rouge (FF = 255 en décimal), moyenne de vert (88 = 136 en décimal) et minimale (00) de bleu pour créer notre couleur finale. Comme on mélange beaucoup de rouge avec un peu de vert, on obtient naturellement du orange.

Les 16 premières couleurs normalisées

Il y a des années de cela, les langages de programmation ne disposaient pas de toutes les fonctionnalités d’aujourd’hui tout simplement car les infrastructures étaient beaucoup moins puissantes que de nos jours.

Ainsi, au départ, seules 16 couleurs ont été normalisées en CSS. C’était déjà un grand pas en avant pour les utilisateurs : ils n’avaient plus qu’à passer le nom (en anglais) de la couleur normalisée en valeur de la propriété CSS color afin de changer la couleur d’un élément.

Ces seize couleurs CSS sont les suivantes. Notez que j’ai déjà renseigné l’équivalent de chaque nom de couleur en notation hexadécimale dans le tableau ci-dessous. Nous reparlerons de ces notations plus tard dans cette leçon.

Gérer l’opacité des éléments avec la propriété opacity

Tout d’abord, on va pouvoir rendre un élément HTML plus ou moins transparent grâce à la propriété CSS opacity.

Cette propriété va accepter une valeur comprise entre 0 et 1 et qui va déterminer le niveau d’opacité d’un élément : la valeur 0 va rendre l’élément totalement transparent tandis que la valeur 1 (valeur par défaut) le rend totalement opaque.

<h1>Un titre de niveau 1</h1>
        
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>

<div class="conteneur">
  <p>Un paragraphe dans un div</p>
  <ul>
    <li>Rouge</li>
    <li>Vert</li>
    <li>Bleu</li>
  </ul>
</div>

h1, p, li{
  font-size: 1.2em;
  font-weight: normal;
}

h1{
  background-color: lightBlue;
  color: purple;
  border: 5px solid purple;
}

.p1{
  color: purple;
  opacity: 0.6;
}

.p2{
  background-color: lightBlue;
  color: purple;
  opacity: 0.6;
}

.conteneur{
  background-color: lightBlue;
  color: purple;
  opacity: 0.6;
  border: 5px solid purple;
}

Propriétés CSS pour les couleurs

Il existe plusieurs types d’unité, et chacun influence à sa manière le design de votre site. Si vous ne savez pas comment choisir entre le “px”, le “em”, ou encore le “vw”, alors vous tombez bien. Nous allons faire un point sur les unités de mesure en CSS pour que vous puissiez les utiliser correctement.

• Les unités absolues
• Les unités relatives au texte
• Les unités relatives au viewport
• Les unités en pourcentage

Les unités absolues

Il existe des unités en CSS qui ne sont influencées par aucune autre dimension. Appelées unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.

Les unités absolues sont les suivantes :

• Les pixels (px)
• Les pouces (in)
• Les centimètres (cm)
• Les millimètres (mm)
• Les picas (pc)
• Les points (pt)

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.box {
width : 150px ;
height : 150 px ;
}

Cela signifie que l’élément box aura la même dimension (150 x 150 pixels), quelle que soit la taille de l’écran.

Les unités relatives au texte

À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments d’un design. On retrouve :

• Em : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
• Rem : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
• Ex : très rarement utilisée, cette unité est relative à la hauteur de la police actuelle en minuscule.
• Ch : cette unité est elle aussi peu utilisée, elle est relative à la largeur du caractère “0”.

Les unités relatives au viewport

D’autres unités permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.

Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive, et on retrouve :

• La hauteur du viewport (vh)
• La largeur du viewport (vw)
• Le viewport minimum (vmin)
• Le viewport maximum (vmax)

Les unités vh et vw

Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.

Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.

L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :

.box {
height :100vh ;
background : red ;
}

Dans cet exemple ci-dessus, l’élément box a une hauteur de 100 % par rapport à la hauteur de la fenêtre de navigation.

Prenons un autre exemple :

h1{
font-size : 6 vw ;
}

Ici la taille du titre H1 correspond à 6% de la largeur de la fenêtre. Par conséquent, si cette dernière est de 1000 px, la taille de la police sera de 60 px.

Les unités vmin et vmax

Ces deux unités de mesure en CSS fonctionnent selon le même principe.

Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte. Par exemple, si ce dernier est de 1000 px de haut par 800 px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.

Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.

Les unités en pourcentage

Le pourcentage fait partie des unités relatives de façon générale puisqu’il s’adapte en fonction de son élément parent.

La plupart du temps, cette unité est utilisée pour définir la hauteur et la largeur d’un élément. Vous la retrouverez notamment dans le framework Bootstrap.