1. De la couleur !

La couleur d'un pixel est obtenue en allumant plus ou moins trois minuscules éléments lumineux : un rouge (r), un vert (g), un bleu (b). Chacun de ces 3 éléments possède 256 niveaux d'éclairement possibles : de 0 (éteint) à 255 (éclairement maximal).

Exemples :

• rgb(0, 0, 0) correspond au noir (tout est éteint).
• rgb(255, 255, 255) correspond au blanc : le mélange ces trois couleurs.
• rgb(255, 0, 0) correspond à un rouge très brillant.

Pour paramétrer la couleur du texte et/ou du fond, on utilise les commandes :

On remplace « blue » par la couleur que l’on souhaite, évidemment !

On peut aussi utiliser un code rgb ou un code hexadécimal :

color : rgb(0, 0, 255) ;
background-color : #233087;

Tous les codes couleurs sont disponibles ici :

2. Une image de fond !

Il est aussi possible d'affecter une image de fond à un élément (toute la page ou bien seulement un paragraphe, un bloc div,...).

Voici un exemple de code :

Les commandes sont assez explicites, mais tous les détails et exemples sont disponibles ici

3. Travail à réaliser

Vous allez modifier le code CSS pour obtenir le résultat ci-dessous :

3.1. Créez un fichier styleminion.css.

3.2. Dans le fichier styleminion.css déjà créé à l'étape précédente, ajoutez les éléments de couleur :

• Fond gris (body)
• Menu (nav) bleu
• Articles jaunes
• Pied de page (footer) orange
• Titre (H1) « Le minion » de couleur jaune

3.3. Effectuez la validation W3C du fichier CSS.

3.4. Modifiez le code CSS pour que le paragraphe de Stuart soit vert green.