Lien du chapitre : https://www.never-utopia.com/t47798-partie-1-etape-1-mise-en-forme-d-elements-de-message

Votre titre

Code:

<span>Votre titre</span>

==> cela ne donne rien car pas encore de mise en forme CSS

span => délimite une ligne
div => délimite un bloc

¨Pour ajouter le CSS :

Code:

<span style="valeur">Votre titre</span>

Donc si on ajoute une valeur :
Votre titre

Code:

<span style="background-color: #ffffff;">Votre titre</span>

Décomposons le code :
- span => votre balise, ici de type "inline" (= en ligne), sans css elle ne changera rien au texte.
- style => ici l'attribut indique qu'un style va être appliqué à ce qui se trouve dans la balise. Du coup, tout ce qui est indiqué entre guillemets (donc la "valeur" de cet attribut) va être imposé au texte "Votre titre".
- background-color => indique sur quoi porte la mise en forme, cette indication doit obligatoirement être suivie de deux points ":", peu importe les espaces par contre, j'ai pour habitude d'en mettre un après les deux points et pas avant, mais il peut ne pas y'en avoir du tout.
- #ffffff => il s'agit du code couleur qui correspond au blanc. Il vous faudra utiliser soit ces codes-là, soit les noms officiels des couleurs. L'un et l'autre vous pouvez les trouver sur le net : Codes couleurs et Nom de la couleur, mais aussi sur votre logiciel en ce qui concerne les codes couleurs.
- ; => attention ! Ce point virgule ne parait pas très important, il est en fait capital ! C'est en effet avec lui que vous séparez deux données de css, donc deux valeurs. Oubliez-le et votre css précédent et/ou suivant ne sera plus pris en compte !

code couleur : https://www.code-couleur.com/


Quelques exemples :

Votre titre

Code:

<span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>

Votre titre

Code:

<span style="font-family: impact; font-size: 34px; letter-spacing: 1px; color: #1a56d0;">Votre titre</span>

Bordures :

Double bordure pointillés

Code:

<span style="border-bottom: 1px dashed #ff7e00; border-top: 1px dashed #ff7e00;">Double bordure pointillés</span>

border-bottom : ligne du dessous
boder-top : ligne du dessus
dashed : pointillés


Votre titre

Code:

<span style="font-family: impact; font-size: 34px; letter-spacing: 5px; color: #1a56d0; text-transform: uppercase; border-top: 3px dotted #232087; border-bottom: 3px dotted #232087;">Votre titre</span>

Cependant, il reste un problème : ne trouvez-vous pas que la bordure est parfois trop collée au texte ? Si ? Alors il faut y remédier ! Ne pensez jamais que quelque chose est impossible en codage... Il faut toujours tout tenter car l'on se rend compte qu'on peut tout trouver.

ajouter une marge intérieure à votre CSS !

Code:

padding: 4px;

Ce qui fait passer de

Code:

<span style="border-bottom: 3px solid #77563d;">Bordure "soulignement" épaisse</span>

Bordure "soulignement" épaisse

à

Code:

<span style="border-bottom: 3px solid #77563d; padding: 4px;">Bordure "soulignement" épaisse</span>

Bordure "soulignement" épaisse

padding-top = marge intérieur en haut

padding-bottom = marge intérieure en base

padding-left = marge intérieure à gauche

padding-right = marge intérieure à droite

MISE EN FORME DE LIENS ET IMAGES

Pour imposer le même genre de mise en forme à des liens ou des images, nous allons procéder à peu près de la même façon, à l'exception cependant que nous n'allons pas mettre une balise supplémentaire autour de notre lien ou de notre image, puisque eux-même en sont déjà. Nous allons simplement les écrire avec du html, et non avec du BBcode ! Je rappelle l'écriture d'un lien et d'une image :

Code:

<a href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
<img src="adresse_image.jpg" />

Puisqu'il s'agit de balises, il est tout à fait possible d'insérer à l'intérieur les mêmes données CSS que dans notre "span" un peu plus haut ! Il suffit donc d'ajouter "style=" et le tour est joué ! Voici ce que cela peut donner, en guise d'exemple :

Code:

<a style="color: red; font-family: arial black; font-size: 16px; border-bottom: 2px dotted blue;" href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>

Texte/Lien vers Never-Utopia

Code:

<img src="http://img11.hostingpics.net/pics/338564Yuni010.jpg" alt="" style="border: 4px solid #000000;" />

Autres balises utiles :

Code:

<center>Votre texte</center> => centre le texte

Code:

<br />

retour à la ligne

Votre titre

Code:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300&family=Pacifico&display=swap" rel="stylesheet"><span style="font-family: pacifico; font-size: 30px; letter-spacing: 5px; color: #ccaf08; text-transform: capitalize;">Votre titre</span>

https://fonts.google.com/specimen/Pacifico
selected families > icon en haut à droite, pour ouvrir l'onglet. Recupérer le lien et le mettre avant le code
ici pour pacifico :