Intro CSS

Identification

Infoforall

3 - Introduction au CSS


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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<!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 :

7 8 11 14 21
<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.

Normalement, vous devriez remarquer que ça pique un peu les yeux. Lors de l'introduction des écrans en couleur pour l'informatique, le nombre de couleur était très limitée. Il ne fallait donc pas trop en abuser sous peine d'avoir des écrans du type de ceux que vous venez de créer.

Nous allons maintenant voir comment obtenir des nuances de couleurs plus importantes.

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 un 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) :

NomInt. RInt. GInt. BExempleHexa
black000#000000
gray128128128#808080
silver192192192#C0C0C0
white255255255#FFFFFF
red25500#FF0000
maroon12800#800000
lime02550#00FF00
green01280#008000
blue00255#0000FF
navy00128#000080
aqua0255255#00FFFF
teal0128128#008080
fuchsia2550255#FF00FF
purple1280128#800080
yellow2552550#FFFF00
olive1281280#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.

Il s'agit d'une synthèse de couleur additive contrairement au mélange de peintures qui est un 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:#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 soit représentée par trois doublets 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 :

  1. Le 0 vaut toujours 0
  2. le 1 vaut toujours 1
  3. le 2 vaut toujours 2
  4. le 3 vaut toujours 3
  5. le 4 vaut toujours 4
  6. le 5 vaut toujours 5
  7. le 6 vaut toujours 6
  8. le 7 vaut toujours 7
  9. le 8 vaut toujours 8
  10. le 9 vaut toujours 9
  11. Et ensuite, c'est embêtant, car il n'existe plus de chiffres différents...

    Alors, on utilise des lettres :

  12. le A vaut 10
  13. le B vaut 11
  14. le C vaut 12
  15. le D vaut 13
  16. le E vaut 14
  17. 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 = 4516 = 6910.

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 = 2616 en décimal.

...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 = 2616 = 3810.

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 = 4516 = 6910.

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

09° Convertir M = x3E = 3E16 en décimal. Faire de même avec M = xFF = FF16

...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 = 3E16 = 6210.

M = x3E = 62.

...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 = FF16 = 25510.

M = xFF = 255.

Nous n'irons pas plus loin.

Le tout est donc de comprendre que FF est plus après et plus grand que FE.

Cela va surtout non permettre d'afficher des caractères spéciaux et à définir des couleurs très précises n'ayant pas de nom normalisé.

Maintenant que vous avez vu le principe du CSS et des différentes codifications des couleurs, nous allons pouvoir écrire un vrai fichier CSS, indépendant du fichier HTML. De cette façon, plusieurs pages HTML pourront lire les mêmes propriétés CSS et avoir exactement la même allure.

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