Ajouter des couleurs
Pour changer les couleurs du texte ou du fond, on utilisera CSS.
​
Il faut savoir que pour définir une couleur, on peut se servir de trois méthodes:
​
1) code RGB (red, green, blue);
Par exemple, la couleur ROUGE (red) est définie par rgb(255, 0, 0)
BLEU (blue) : rgb(0, 0, 255)
JAUNE (yellow): rgb(255, 255, 0), etc.
​
2) code hexadécimal qui a le format #RRGGBB:
​
Par exemple, la couleur ROUGE (red) est définie par #FF0000
BLEU (blue) : #0000FF
JAUNE (yellow): #FFFF00, etc.
​
3) en utilisant le mot pour une couleur, en anglais:
Par exemple: rouge = red; vert = green, bleu = blue, etc. Cette méthode est la plus limitante, car on n'a que les mots pourles couleurs les plus répandues, mais on ne tient pas compte des nuances.
​
Pour avoir le code de n'importe quelle couleur, vous pouvez aller sur le site suivant:
​
https://www.w3schools.com/colors/colors_picker.asp
​
Si vous voulez prendre la couleur à partir d'une certaine page, vous pouvez installer l'extension de Google Chrome.Eye Dropper.
​
​
​
Malgré qu'il y ait certaines possibilités de mettre des couleurs sur la page à l'aide des paramètres et des balises, on va voir la façon la plus flexible et "élégante", celle qui implique CSS.
​
-
Placez le curseur à l’intérieur de la balise <head>. Vous allez définir le style de la balise depuis l’intérieur du fichier.
Tapez <style> pour créer un code CSS interne au fichier. Lorsqu'il y a une balise <style> à l’intérieur de la balise <head>, le code CSS qui se trouve à l’intérieur va être appliqué à tous les éléments de la page.
​
<!DOCTYPE html>
<html>
<head>
<style>
​
</style>
</head> ​
</html>
​
-
Tapez l’élément dont vous voulez changer la couleur. Vous allez maintenant utiliser la section <style> pour définir l’apparence des différents éléments de la page. par exemple, si vous voulez changer l’apparence du texte dans le corps de la page, voici ce que vous devez faire :
​
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
​
-
Tapez l’attribut color: dans le sélecteur de l’élément. L’attribut color: permet de dire à la page de quelle couleur vous voulez que soit le texte dans l’élément. Dans notre exemple, cela va changer la couleur du texte dans la balise <body> (le corps de la page), l’élément par défaut du texte de la page. Si vous voulez changer la couleur du fond de la page, utilisez l'attribut background-color au lieu de 'color'.
​
-
Indiquez la couleur du texte en utilisant l'une des trois façons différentes d’indiquer la couleur que vous voulez : son nom, sa valeur en hexadécimal ou sa valeur RGB.
​
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
​
-
Ajoutez d’autres sélecteurs pour faire changer la couleur d’autres éléments. Vous pouvez utiliser différents sélecteurs pour changer la couleur du texte dans différentes parties de la page.
​
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
​
h1 {
color: #00FF00;
}
p {
color: rgb(0,0,255)
}
</style>
</head>
​
-
Définissez une classe CSS au lieu de changer un élément. Vous pouvez définir une classe et l’appliquer à un élément que vous aimeriez changer dans la page pour lui donner la couleur que vous voulez. Par exemple, dans l'exemple suivant, la classe « .texteenrouge » va colorer en rouge tous les éléments auxquels elle est appliquée. Attention: devant le nom d'une classe, définie ainsi, il faut mettre un point "."
​
<!DOCTYPE html>
<html>
<head>
<style>
.texteenrouge {
color: red;
}
</style>
</head> ​
</html>
​
Ici, vous allez trouver les noms et les valeurs hexadécimales des couleurs le plus souvent utilisées.
​
D'autres CSS attributs intéressants pour rendre la page plus belle
​
-
background-image : vous pouvez le mettre dans la partie body (dans la balise style) pour dire au navigateur de mettre une image au fond de la page. Vous pouvez trouver des détails sur cet attribut et comment l'utiliser sur cette page.
​
Exemple:
​
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image : url ("https://bit.ly/3hQq6S3");
}
</style>
</head>
​
On peut mettre plusieurs images de fond l'une par dessus l'autre. Voir le code suivant. La première image sera celle qui sera posée le plus haut, le plus près de celui qui lit la page.
​
​
​
​
​
​
​
​
​
-
text-indent: Permet de définir le retrait de la premier ligne du bloc de texte (text-indent: 15px;).
-
font-family: Spécifie la police de caractère à utiliser.
-
font-size: Permet de définir la taille de la police de caractères (font-size:large;
font-size:x-large; font-size:small; font-size:x-small; font-size:20px;). -
font-decoration:
-
Texte souligné : text-decoration:underline;
-
Barre au dessus du texte: text-decoration:overline;
-
Texte barré: text-decoration:line-through;
-
​
DEVOIR
​
Sources:
​
https://fr.wikihow.com/changer-la-couleur-du-texte-en-HTML
https://htmlcolorcodes.com/fr/tutoriels/couleur-de-fond-html/
​
Utiliser CSS pour ajouter des couleurs
