CSS3 étape 2

Nous avons centré notre image dans notre page, avons choisi ses dimensions et sa position dans la page.

Nous pouvons commencer par lui donner une bordure, par exemple, toujours en html seul.

Nous avons copié notre adresse image hébergée et en code source nous retrouvons le code écrit :

<p style="text-align:center;"><img src="http://ekladata.com/zpwGKk1c4KO0w6AnVzop5yPTgRE/ins2.png"></p>

Ajouter des "attributs" n'est pas compliqué car ils ne nécessitent pas d'ordre défini et s'écrivent les un derrière les autres.

Une bordure peut s'écrire: border:10px solid white;

10 px = épaisseur de la bordure.

solid= style de la bordure; ici, continue. Parmi d'autres styles: ridge, double...

pink= couleur qui peut s'écrire en nom (en anglais), en hexdécimal (#ffc0cb) ou en rgba (rgba(255,192,203,1);

<p style="text-align: center;"><img style="border: 10px solid pink;" src="http://ekladata.com/zpwGKk1c4KO0w6AnVzop5yPTgRE/ins2.png" alt="" /></p>

Je ne résiste pas à vous proposer un liseré intérieur, revu il y a peu:

<p style="text-align: center;"><img style="border: 10px solid pink; outline:6px double white; outline-offset:-40px;" src="http://ekladata.com/zpwGKk1c4KO0w6AnVzop5yPTgRE/ins2.png" alt="" /></p>

A suivre... !