Couleur de texte

La propriété color permet de spécifier la couleur à appliquer à un texte. Le texte peut être placé dans n'importe quelle balise (<div>, <span>, <header>...).

Gestion des couleurs en CSS

Pour décrire une couleur en CSS, il existe plusieurs méthodes:

• Nom de la couleur en anglais: A l'instar de HTML, on peut décrire une couleur par son nom. Or, ce n'est pas très pratique comme méthode car peu de couleurs ont réellement de noms, alors qu'ils en existent plus de 16 millions en tout.
• Code hexadécimal: Comme pour le HTML, on peut définir une couleur par le code hexadécimal .
• Code décimal (ou RGB): En CSS, une autre méthode pour définir les couleurs existe. Il s'agit d'indiquer le code décimal de la couleur. Le principe reste le même que pour le codage hexadécimal, mais les codes sont exprimés à la base décimale dont les nombres seront, cette fois, compris entre 0 et 255. A titre d'exemple, le code du rouge est : rgb(255,0,0). Les valeurs dans les parenthèses représentent respectivement les couleurs primaires rouge, vert et bleu.
• Code RGBA: Depuis la version 3 de CSS, une nouvelle méthode pour décrire les couleurs est apparue. Il s'agit de RGBA. Cette notation permet de prendre en compte le degré de transparence (le A pour Alpha). Les trois premiers paramètres de RBGA désignent les couleurs primaires et le quatrième indique le degré de transparence de la couleur appliquée. Il est compris entre 0 (pour totalement transparent) et 1 (pour totalement opaque), et peut avoir deux chiffres après la virgule. Par exemple, rgba(255,0,0,0.5) désigne un rouge translucide.
• Le mot clé inherit: Le mot clé inherit permet à une balise d'hériter le style de la balise dans laquelle elle est inclue. Dans ce cas c'est la couleur qui sera héritée.

Exemple de code CSS:
Ce code applique la couleur orange sur les textes contenus dans les balises <h1>, gris pour les <div>, bleu pour les <span> et noir translucide pour les <footer>.

Définir les couleurs en vidéo

Propriétés d'arrière plan

CSS agit sur les arrière plan en leur appliquant différents style dont voici les plus utilisés:

Propriété background-color

La propriété background-color permet d'appliquer une couleur d'arrière plan à l'objet HTML souhaité. Pratiquement, tous les objets HTML peuvent avoir un arrière plan. La valeur de cette propriété correspond à la couleur que l'on peut décrire par l'une des 4 méthodes expliquées dans le paragraphe précédent.

Si on souhaite colorer le fond de la page Web en entier alors on utilise le sélecteur de balise body:
Ce code applique un gris clair à l'arrière-plan du document.

Propriété background-image

La propriété background-image sert à insérer une image en arrière plan de l'objet souhaité. en utilisant la syntaxe suivante: background-image:url("chemin_de_l_image"). Le chemin de l'image peut être absolu ou relatif à partir de l'emplacement où est déclaré le style.

Il faut noter que l'image est appliquée en arrière plan avec sa taille réelle. Si elle est plus grande que l'objet qui l'accueille alors elle sera tronquée et si elle est plus petite alors elle sera répétée jusqu'à ce que tout le fond de l'objet soit couvert.

Exemple:
Ce qui donne:

Propriété background-repeat

La propriété background-repeat permet de contrôler la répétition de l'image au cas où celle ci est plus petite que l'objet qui l'accueille. On peut lui donner les valeurs suivantes:

• repeat: C'est la valeur par défaut. Elle permet de répéter l'image sur la largeur et la hauteur de l'objet.
• repeat-x: Sert à répéter l'image seulement sur la largeur de l'objet.
• repeat-y: Sert à répéter l'image seulement sur la hauteur de l'objet.
• no-repeat: Avec cette valeur, l'image est appliquée une seule fois sans répétition. Par défaut elle sera placée sur le coin haut à gauche de l'objet.

Exemple:
Ce qui donne:

Propriété background-position

La propriété background-position permet de placer l'image de l'arrière plan à l'endroit souhaité de l'objet. Par défaut, la première image qui s'applique en arrière-plan est placée en haut à gauche, puis les autres images la suivent pour combler tout l’espace disponible.

La valeur que l'on peut donner à cette propriété peut être exprimé en pourcentage (%) ou par les mots clé: top, center,bottom,left et right. Par exemple si on souhaitait placer l'image d'arrière plan au juste milieu de l'objet, la propriété CSS ressemblerait à ceci: background-position:center center ou background-position:50% 50%. Nous avons exprimé deux valeurs séparées par un espace, une pour la largeur et l'autre pour la hauteur.

Exemple:
Ce qui donne:

Propriété background-attachment

La propriété background-attachment permet de fixer l'arrière-plan de l'objet si celui là contient une barre de défilement. Elle peut avoir deux valeurs: scroll qui est la valeur par défaut et qui laisse défiler l'arrière plan avec l'avant plan si le client entraîne la barre de défilement qui apparaît sur l'objet et fixed qui permet de figer l'arrière plan pendant que l'avant plan glisse en dessus.

Pour mieux comprendre à quoi cela ressemble on va exécuter le code suivant:
Après exécution on aura:

Propriété background-size

La propriété background-size permet de modifier la taille de l'image appliquée en arrière plan d'un container (ou de la page entière). Par défaut, l'image est appliquée avec sa taille réelle. Ce qui pose parfois un problème d'affichage, car soit elle est trop grande ou trop petite par rapport au container qui l'accueille.

La propriété background-size peut accepter deux valeurs; la largeur et la hauteur. Ces valeurs peuvent être exprimées en pixel ou en pourcentage. Cependant, la valeur "cover" semble être trop pratique car elle permet d'adapter l'image au container de telle sorte à en exploiter l'espace maximal.

Appliquons la valeur cover à background-size sur l'image de l'exemple:
Après exécution on aura:

La sous propriété linear-gradient

La sous propriété linear-gradient s'applique à la propriété background pour générer un arrière plan en dégradé de couleur. Elle possède trois paramètres:

• Direction du dégradé: qui peut avoir les valeurs comme to bottom (vers le bas), to left (vers la gauche), to left bottom (incliné vers la gauche et vers le bas) etc... Par défaut elle vaut la valeur to bottom.
• Couleur de début: Précise à partir de quelle couleur le dégradé sera engendré. La couleur est spécifiée grâce à l'une des 4 méthodes déjà vues.
• Couleur de fin: Précise la deuxième couleur du dégradé.

Entre la couleur de début et la couleur de fin le navigateur générera des nuances assurant un passage progressif entre les deux couleurs.

Exemple:
Ce qui donne:
La syntaxe de la sous propriété linear-gradient est légèrement modifiée pour les anciennes versions de certains navigateur afin de la rendre compatible. En effet, on la précède par un préfixe connu sous le nom de préfixe vendeur. Ce préfixe fait référence aux différents moteurs de rendu existants.

Voici la liste des préfixes vendeur connus:

• -moz-: signifie Mozilla et fait référence à son moteur de rendu Gecko.
• -webkit-: signifie le moteur de rendu Webkit (utilisé par Google Chrome et Safari).
• -o-: signifie Opera et son moteur de rendu Presto.
• -ms-: signifie Microsoft et fait référence à son moteur de rendu Trident.

La déclaration précédente peut donc s'écrire comme ceci:
La dernière ligne est destinée aux navigateurs modernes, pour lesquels les préfixes sont devenus inutiles. En fait, le navigateur lit les lignes une à une jusqu'à ce que le code soit exécuté correctement.

Il est possible de spécifier plusieurs couleurs pour le dégradé. Le navigateur fera en sorte de répartir les espaces d'une manière équitable.

Exemple:
Ce qui donne:
Si on veut que le navigateur ne répartisse pas les dégradés équitablement alors on peut spécifier la longueur sur laquelle ceux ci s'étalent. Il est préférable de spécifier cette longueur en pourcentage.

Exemple:
Ce qui donne:
Dans ce cas on a précisé que le jaune s'applique au début. A 30% de la zone on applique le rouge. Le dégradé entre le jaune et le rouge s'étale donc sur 30% de la hauteur de la zone colorée. Ensuite le magenta s'applique à la fin et le dégradé entre le rouge et le magenta s'applique donc sur 70% de la zone colorée.

Couleurs de textes et arrière-plans en vidéo