La couleur du texte

Nous avons déjà appris comment mettre la couleur du texte en html pure. Cependant nous allons voir la même chose mais en HTML/ CSS.

Pour mettre de la couleur sur un texte en CSS, nous avons trois options pour choisir la couleur :

  • Soit nous mettons le nom de couleur en anglais comme par exemple : red pour le rouge, green pour le vert, blue pour le bleu, white pour le blanc, black pour le noir, brown pour le marron.
  • Soit nous utilisons le code hexadécimal pour déterminer la couleur. Comme par exemple FFFFFF pour le blanc, 000000 pour le noir, 0000FF pour le bleu.
  • Soit nous procédons à un mélange des couleurs. Nous savons très bien que toutes les couleurs existantes, nous pouvons les obtenir en faisant un mélange de trois couleurs qui sont la couleur rouge (red), la couleur verte (green) et la couleur bleue (blue). Ces trois couleurs sont toujours abrégées comme ça :
    • -RVB en français.
    -RGB en anglais.
    C’est l’abréviation anglaise qui nous intéresse
    Le mélange se fait ainsi : rgb( quantité_du_rouge, quantité_du_vert,quantité_du_bleu). La quantité c’est juste un nombre entier qui se trouve dans cette intervalle [0 , 255].

    Exemple 1 :
    Le cas où nous mettons le nom de la couleur en anglais
    voici la page html :

    Voici par la feuille CSS style.css

    Exemple 2 :
    le cas où nous utilisons le code hexadécimal pour déterminer la couleur :
    dans cette exemple, nous utilisons la même page html que celle de l’exemple 1.
    Voici la feuille de style style.css

    Exemple 3 : le cas où nous utilisons le mélange rgb.
    Dans cet exemple, nous utilisons la même page html que celle de l’exemple 1.
    Voici la feuille de style style.css

    Dans le cas où on se trouve avec une page ayant plusieurs balises semblable et qu’on veut attribuer certains styles à certaines balises et laisser les autres, on utilisera l’attribut class, un attribut qui va avec tous les balises.
    Syntaxe : <span class="nom_de_la_classe">contenu de la balise</span>

    Exemple 4 :
    Voici le code html :

    voici le css :



    Une question? Cliquez ici pour la poser.

    Retour sur le portail du HTML/CSS