CSS - Couleurs : Un voyage coloré pour les débutants

Salut à toi, futurs maîtres du design web ! ? Je suis ravi de t'emmener dans une aventure vibrante à travers le monde des couleurs en CSS. En tant que quelqu'un qui enseigne cela depuis des années, je peux te dire que comprendre les couleurs en CSS, c'est comme apprendre à peindre avec du code. C'est fun, créatif, et tellement satisfaisant lorsque tu as raison !

Table des matières

1. Types de valeurs pour les couleurs en CSS
2. Couleur de fond en CSS
3. Couleur du texte en CSS
4. Couleur de la bordure en CSS
5. Couleur du curseur en CSS
6. Mots-clés de couleur en CSS
7. Mot-clé inherit pour les couleurs en CSS
8. Mot-clé transparent pour les couleurs en CSS
9. Mot-clé currentColor pour les couleurs en CSS
10. Construction des codes de couleur en CSS
11. Couleurs sécurisées pour les navigateurs en CSS

Types de valeurs pour les couleurs en CSS

Commençons par les bases. En CSS, nous avons plusieurs façons d'exprimer les couleurs. C'est comme avoir différents pinceaux dans votre boîte à outils. Voici un tableau pratique pour résumer :

Type de valeur de couleur	Exemple	Description
Mot-clé	red, blue, green	Noms de couleurs prédéfinis
Hexadécimal	#FF0000, #00FF00	Codes à 6 chiffres représentant les valeurs RVB
RVB	rgb(255, 0, 0)	Valeurs Rouge, Vert, Bleu (0-255)
RGBA	rgba(255, 0, 0, 0.5)	RVB avec le canal Alpha (opacité)
HSL	hsl(0, 100%, 50%)	Teinte, Saturation, Luminosité
HSLA	hsla(0, 100%, 50%, 0.5)	HSL avec le canal Alpha

Maintenant, plongeons plus profondément dans chacun de ces types et voyons comment nous pouvons peindre nos pages web avec eux !

Couleur de fond en CSS

La couleur de fond est comme le canevas de votre page web. Commençons par un exemple simple :

body {
background-color: #87CEEB;
}

Ce code définit la couleur de fond de votre page entière en bleu céleste. Le #87CEEB est un code hexadécimal. Pensez-y comme un code secret que les navigateurs comprendre pour afficher des couleurs.

Mais que faire si vous voulez ajouter une couleur de fond à un élément spécifique ? Pas de problème !

.highlight-box {
background-color: rgb(255, 255, 0);
}

Cela rendra tout élément avec la classe highlight-box avec un arrière-plan jaune vif. Ici, nous utilisons des valeurs RVB où chaque nombre représente l'intensité du rouge, du vert et du bleu respectivement.

Couleur du texte en CSS

Maintenant que nous avons peint notre arrière-plan, colorons notre texte :

p {
color: #333333;
}

Cela définit tout le texte des paragraphes en gris foncé. Notez que nous utilisons la propriété color pour le texte, pas text-color. C'est l'un de ces petits détails que vous serez habitué !

Faisons les choses plus intéressantes :

.warning {
color: rgba(255, 0, 0, 0.7);
}

Cela crée une couleur rouge semi-transparente pour les éléments avec la classe warning. La dernière valeur dans rgba() est le canal alpha, contrôlant l'opacité de 0 (complètement transparent) à 1 (complètement opaque).

Couleur de la bordure en CSS

Les bordures sont comme le cadre de votre peinture. Ajoutons un peu de couleur :

.box {
border: 2px solid #4CAF50;
}

Cela crée une bordure de 2 pixels large, solide et verte autour des éléments avec la classe box.

Mais pourquoi s'arrêter à une couleur ? Faisons du style :

.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}

Maintenant, nous avons des couleurs et des styles différents pour chaque côté de la bordure. C'est comme une petite boîte arc-en-ciel !

Couleur du curseur en CSS

Saviez-vous que vous pouvez même changer la couleur du curseur clignotant dans les champs d'entrée ? C'est ce que fait caret-color :

input {
caret-color: purple;
}

Maintenant, lorsque vous cliquez dans n'importe quel champ d'entrée, vous verrez un curseur violet !

Mot-clés de couleur en CSS

Parfois, vous voulez simplement garder les choses simples. C'est là que les mots-clés de couleur deviennent pratiques :

.sky {
background-color: skyblue;
}

.grass {
background-color: limegreen;
}

.sun {
background-color: gold;
}

Ces noms de couleurs prédéfinis sont faciles à retenir et à utiliser. Il y a 140 mots-clés de couleur en CSS3, vous offrant suffisamment d'options sans avoir besoin de se souvenir de codes complexes.

Mot-clé inherit pour les couleurs en CSS

Le mot-clé inherit est comme dire à un élément : "Utilise simplement la couleur de ton parent." C'est génial pour maintenir la cohérence :

.parent {
color: blue;
}

.child {
color: inherit;
}

Dans ce cas, les éléments .child seront également bleus, héritant de la couleur de leur parent.

Mot-clé transparent pour les couleurs en CSS

Parfois, vous ne voulez aucune couleur du tout. C'est là que transparent entre en jeu :

.ghost-button {
background-color: transparent;
border: 2px solid black;
}

Cela crée un bouton sans couleur de fond, juste une bordure noire. C'est comme une fenêtre dans votre conception !

Mot-clé currentColor pour les couleurs en CSS

Le mot-clé currentColor est comme un caméléon - il prend la valeur de couleur actuelle de l'élément :

.chameleon {
color: green;
border: 1px solid currentColor;
}

Ici, la bordure sera verte, correspondant à la couleur du texte. Si vous changez la couleur du texte, la couleur de la bordure change automatiquement !

Construction des codes de couleur en CSS

Maintenant, parlons de la construction de vos propres codes de couleur. Les codes hexadécimaux sont comme mélanger des peintures :

/* Rouge pur */
.red-box { background-color: #FF0000; }

/* Vert pur */
.green-box { background-color: #00FF00; }

/* Bleu pur */
.blue-box { background-color: #0000FF; }

Chaque paire de caractères représente l'intensité du rouge, du vert et du bleu respectivement, de 00 (aucun) à FF (complet).

HSL est un autre moyen de penser aux couleurs :

/* Rouge vif */
.bright-red { color: hsl(0, 100%, 50%); }

/* Bleu pastel */
.pastel-blue { color: hsl(210, 100%, 80%); }

Ici, le premier nombre est la teinte (0-360), le second est la saturation (0-100%), et le troisième est la luminosité (0-100%).

Couleurs sécurisées pour les navigateurs en CSS

Dans les premiers jours d'Internet, nous devions nous en tenir à une palette limitée de 216 couleurs que tous les navigateurs pouvaient afficher. Ces couleurs étaient appelées "couleurs sécurisées pour les navigateurs". Aujourd'hui, avec les écrans modernes, ce n'est pas aussi crucial, mais c'est toujours bon à savoir :

.old-school {
color: #CC3300; /* Une orange sécurisée pour les navigateurs */
}

Ces couleurs sont des combinaisons de 00, 33, 66, 99, CC, et FF pour chaque composant RVB.

Et voilà, mes compagnons colorés ! Nous avons peint notre chemin à travers les bases des couleurs en CSS. Souviens-toi, la meilleure façon d'apprendre, c'est d'expérimenter. Alors ouvre ton éditeur de code et commence à colorer ton monde digital. Bon codage, et puissent tes designs toujours être vibrants ! ??‍??‍?

Credits: Image by storyset