3 - Introduction au CSS

⏪

⏬

⏩

1 - style

2 - Couleurs

3 - Hexa

Nous avons vu jusqu’à présent comme afficher un simple texte à l’écran et comment structure nos textes en les plaçant dans les balises adéquates.

Mais il manque encore un peu de couleurs. C'est ce que nous allons voir aujourd'hui avec deux propriétés CSS.

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepaddd (Linux)

1 - Attribut Style

⇩ ⇧ ⤊

Vous avez déjà utilisé un peu de CSS sans le savoir lors de l'activité précédente.

01° Tester le code ci dessous. Du contrôle CSS apparait sur les lignes mises en valeur. Modifier les couleurs en tentant d'utiliser d'autres noms de couleurs en anglais.

<!DOCTYPE html>
<html lang="fr">
<head >
    <title>Activité CSS</title>
    <meta charset="UTF-8">
</head>
<body style="background-color:grey;">
    <header style="background-color:red;">
        <h1>Mon super site</h1>
    </header>
    <nav style="background-color:blue;">
        <p>Pas de menu de navigation pour le moment</p>
    </nav>
    <main style="background-color:green;">
        <h1>Une page pour manipuler le CSS</h1>
        <h2>1 Première partie</h2>
        <p>Bla bla.</p>
        <h2>2 Deuxième partie</h2>
        <p>Encore du blabla.</p>
    </main>
    <footer style="background-color:yellow;">
        <h2>Contact</h2>
        <p>Pour contacter le webmaster, il met normalement son adresse ici.</p>
        <p>Pour l'instant, il préfère rester discret :</p>
        <p>le contenu n'est pas très conséquent.</p>
    </footer>
</body>
</html>

On remarque qu'un motif revient régulièrement :

<body style="background-color:grey;">
    <header style="background-color:red;">
    <nav style="background-color:blue;">
    <main style="background-color:green;">
    <footer style="background-color:yellow;">

Modifier le style directement depuis le HTML

On utilise un attribut HTML nommé style. Cet attribut HTML permet tout simplement de modifier l'apparence ou le comportement de la balise en suivant la codification CSS, Cascading Style Sheet. L'affectation se fait avec le signe égam ( = ).

On transmet une chaîne de caractères contenant deux parties séparées par deux-points ( : ) :

Une propriété CSS. Ici il s'agit de background-color.
La valeur à imposer. Ici, il s'agit d'une couleur sous forme textuelle. Par exemple green.

La fin de la chaîne de caractères comporte un point virgule : ; . Il s'agit du caractère permettant de séparer les différentes propriétés CSS.

Comme vous pouvez le voir, l'utilisation de la propriété background-color permet de gérer la couleur de fond de la balise.

Pourquoi y-a-t-il du gris entre les zones ? Par défaut, les balises utilisées sont définies pour laisser un certain espacement entre elles et les autres balises. Le gris est donc la couleur du conteneur : le body.

02° Changer la couleur du fond (du body donc). En noir (black) ou en violet (purple) par exemple.

Que les choses soient claires : mettre du CSS directement dans du HTML est contre-productif : le CSS a été créé pour modifier automatiquement toutes les pages à l’aide des mêmes lignes de code. Si vous placez la couleur de vos parties directement sur vos pages, vous allez devoir :

1-Les taper à chaque fois.

2-Les modifier une à une sur chacune de vos pages en espérant ne pas vous tromper ou en oublier une.

Bref, sauf cas exceptionnel, on ne gère pas la forme du fond à l’aide de la méthode que nous venons de voir.

Couleur du texte et couleur du fond

Nous venons de voir qu'il faut utiliser la propriété background-color pour modifier la couleur du fond d'une balise.


    <header style="background-color:red;">

Pour modifier la couleur du texte, il suffit d'utiliser la propriété color.


    <header style="color:yellow;">

On peut même utiliser les deux à la fois en pensant bien à utiliser le point-virgule.


    <header style="background-color:red;color:white">

03° Modifier la couleur du texte sur quelques unes des balises.

2 - Les couleurs et leurs codes

⇩ ⇧ ⤊

Il existe un très grand nombre de façon de définir une couleur à l'aide du CSS.

La première façon d’imposer une couleur est d’utiliser un nom prédéfini (ce qu’on a fait juste au dessus avec red, green, yellow …) : background-color:green; fonctionne très bien.

La deuxième façon est de donner les intensités RGB :

Couleurs RGB en décimal

votre écran est composé de pixels. Et chaque pixel se décompose en trois parties :

Une partie qui brille en Rouge / Red
Une partie qui brille en Vert / Green
Une partie qui brille en Bleu / Blue

Chaque couleur peut-être plus ou moins intense de 0 (aucune intensité, sous-pixel noir) à 255 (la couleur la plus intense).

Si on veut du rouge pur et intense, il suffit d'écrire ceci : style=background-color:rgb(255,0,0);".

Si on veut du vert pur et intense, il suffit d'écrire ceci : style=background-color:rgb(0,255,0);".

Si on veut du bleu pur et intense, il suffit d'écrire ceci : style=background-color:rgb(0,0,255);".

Il s'agit d'une synthèse de couleur additive contrairement au mélange de peintures qui est une synthèse soustractive. Cela veut dire que si vous voulez du jaune, il faut utiliser le rouge et le vert.

Si on veut du jaune pur et intense, il suffit d'écrire ceci : style=background-color:rgb(255,255,0);".

Si on veut du blanc, il suffit d'écrire ceci : style=background-color:rgb(255,255,255);".

Si on veut du noir, il suffit d'écrire ceci : style=background-color:rgb(0,0,0);".

04° Modifier la façon dont vous avez défini vos couleurs en utiliser cette méthode numérique plutôt que de taper directement le nom d'une couleur.

05° Utiliser les propositions ci-dessous pour voir les couleurs que cela représente ) chaque fois :

style=background-color:rgb(100,100,100);".

style=background-color:rgb(200,200,200);".

style=background-color:rgb(200,0,0);".

style=background-color:rgb(100,0,0);".

style=background-color:rgb(50,0,0);".

style=background-color:rgb(100,100,0);".

Voilà un court extrait des couleurs disponibles par leurs noms puis leurs codes RGB en décimal puis par un code hexadécimal (que nous allons voir juste après) :

Nom	Int. R	Int. G	Int. B	Hexa
black	0	0	0	#000000
gray	128	128	128	#808080
silver	192	192	192	#C0C0C0
white	255	255	255	#FFFFFF
red	255	0	0	#FF0000
maroon	128	0	0	#800000
lime	0	255	0	#00FF00
green	0	128	0	#008000
blue	0	0	255	#0000FF
navy	0	0	128	#000080
aqua	0	255	255	#00FFFF
teal	0	128	128	#008080
fuchsia	255	0	255	#FF00FF
purple	128	0	128	#800080
yellow	255	255	0	#FFFF00
olive	128	128	0	#808000

La troisième façon est de donner le code hexa, ce qu’on appelle le code HTML : background-color: #aabbcc ;

Couleurs RGB en hexadécimal

C'est le même principe qu'en décimal : on donne les trois intensités RGB dans l'ordre mais on fait précéder les valeurs par un dièse # pour signaler qu'il s'agit du code hexadécimal :

background-color: #RRGGBB;

On code donc les trois intensités rouge - vert - bleu à l'aide d'un nombre en utilisant l'hexadécimal plutôt que le décimal.

Chaque couleur peut-être plus ou moins intense de 0 (aucune intensité, sous-pixel noir) à 255 (la couleur la plus intense).

Si on veut du rouge pur et intense, il suffit d'écrire ceci : style=background-color:#FF0000;". On met donc le rouge à FF et les autres à 00.

Si on veut du vert pur et intense, il suffit d'écrire ceci : style=background-color:#00FF00;". On met donc le vert à FF et les autres à 00.

Si on veut du bleu pur et intense, il suffit d'écrire ceci : style=background-color:#0000FF;". On met le bleu à FF et les autres à 0.

Si on veut du jaune pur et intense, il suffit d'écrire ceci : style=background-color:#FFFF00;".

Si on veut du blanc, il suffit d'écrire ceci : style=background-color:#FFFFFF;".

Si on veut du noir, il suffit d'écrire ceci : style=background-color:#000000;".

06° Utiliser quelques unes des couleurs sous forme de code hexadécimal.

C’est la façon la plus courante de présenter une couleur en HTML.

Nous verrons dans la partie suivante comme on utilise la base 16, l'hexadécimal.

Hexadécimal version mini rikiki

Pour l'instant, on pourra se contenter de cela : les intensités sont comprises de 00 (0 en décimal) à FF (255).

On notera que les intensités suivantes sont d'autant plus fortes que la première position est proche de F : (ci-dessous, x peut prendre n'importe quelle valeur de l'ensemble 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F)

0x < 1x < 2x < ... 8x < 9x < Ax < Bx < Cx < Dx < Ex < Fx <

Ainsi une intensité rouge FB crée un rouge plus intense que F0.

Par contre, une intensité BF est moins forte que C0.

Cas particulier

Il est possible que les trois intensités RGB soient représentées par trois associations de deux chiffres identiques en hexa :

La couleur #00FFFF soit 00 FF FF pourra alors être codée par #0FF.

Voyant uniquement trois chiffres, le navigateur va recréer le vrai code en doublant les nombres : #00FFFF.

07° Représenter un fond rouge sur l'une des balises en utilisant style=background-color:#F00;". Faire de même avec un fond bleu.

Une quatrième façon est de donner les composantes RGB en %, 100% représentant 255 : pour du rouge, on obtient ainsi style=background-color:rgb(20%,50%,30%);"

Vous pouvez faire un essai ou deux si vous voulez mais je pense que vous avez compris le principe.

3 - Hexadécimal

⇩ ⇧ ⤊

Commençons par revoir quelques notions évidentes sur le décimal :

Rappel sur le décimal, la base 10

En base 10, nous avons 10 CHIFFRES : 0 - 1 - 2 - 3 - 4 - 5 - 6-0 - 7 - 8 - 9 .

Lorsqu'on donne un nombre décimal, par exemple M = 2 4 5 , il faut se souvenir que :

5 est le chiffre des unités : il code 5 *1 = 5
4 est le chiffre des dizaines : il code 4 *10 = 40
2 est le chiffre des centaines : il code 2 *100 = 200

Compter en hexédécimal, c'est compter en base 16.

Le principe est donc d'avoir 16 CHIFFRES plutôt que 10.

Le chiffre le plus à droite code toujours 1.

Le chiffre à gauche ne code plus 10 par contre : il code 16 !

Hexadécimal, la base 16

En base 16, nous avons 16 CHIFFRES :

Le 0 vaut toujours 0
le 1 vaut toujours 1
le 2 vaut toujours 2
le 3 vaut toujours 3
le 4 vaut toujours 4
le 5 vaut toujours 5
le 6 vaut toujours 6
le 7 vaut toujours 7
le 8 vaut toujours 8
le 9 vaut toujours 9

Et ensuite, c'est embêtant, car il n'existe plus de chiffres différents...

Alors, on utilise des lettres :

le A vaut 10
le B vaut 11
le C vaut 12
le D vaut 13
le E vaut 14
le F vaut 15

Lorsqu'on donne un nombre hexadécimal, par exemple M = 4 5 , il faut se souvenir que :

5 est le chiffre des unités : il code 5 *1 = 5
4 est le chiffre suivant : il code 4 *16 = 64

On voit donc que 45 en hexadécimal vaut 64+5, soit 69 en décimal.

En mathématiques, on pourra écrire ceci pour éviter les confusions :

M = 45₁₆ = 69₁₀.

En informatique, on utilise plutôt x devant un nombre pour indiquer un nombre en hexadécimal. On notera donc :

M = x45 = 69.

08° Convertir M = x26 = 26₁₆ en décimal.

Correction ?

...CORRECTION...

M = 2 6 , donc :

6 est le chiffre des unités : il code 6 *1 = 6
2 est le chiffre suivant : il code 2 *16 = 32

On voit donc que 26 en hexadécimal vaut 32+6, soit 38 en décimal.

M = 26₁₆ = 38₁₀.

M = x26 = 38.

Autre exemple :

M = FA, il faut se souvenir que :

A est le chiffre des unités : il code 10*1 = 10
F est le chiffre suivant : il code 15*16 = 240

On voit donc que 45 en hexadécimal vaut 240+10, soit 250 en décimal.

En mathématiques, on pourra écrire ceci pour éviter les confusions :

M = 45₁₆ = 69₁₀.

En informatique, on utilise plutôt x devant un nombre pour indiquer un nombre en hexadécimal. On notera donc :

09° Convertir M = x3E = 3E₁₆ en décimal. Faire de même avec M = xFF = FF₁₆

Correction ?

...CORRECTION 3E...

M = 3 E , donc :

E est le chiffre des unités : il code 14 *1 = 14
3 est le chiffre suivant : il code 3 *16 = 48

On voit donc que 3E en hexadécimal vaut 48+14, soit 62 en décimal.

M = 3E₁₆ = 62₁₀.

M = x3E = 62.

Correction ?

...CORRECTION FF...

M = F F , donc :

F est le chiffre des unités : il code 15 *1 = 15
F est le chiffre suivant : il code 15 *16 = 240

On voit donc que FF en hexadécimal vaut 240+15, soit 255 en décimal.

M = FF₁₆ = 255₁₀.

M = xFF = 255.

Activité publiée le 28 08 2019
Dernière modification : 18 09 2019
Auteur : ows. h.

⏪

⏫

⏩