Mettre en valeur du texte dans un article

Lorsque vous écrivez un article, vous pouvez avoir envie de mettre en avant un passage, ou ajouter en fin d'article une astuce bien visible...

Astuce : Voilà comment différencier une zone de texte et aussi comment la mettre en valeur...

Commencez par copier-coller dans la feuille de style, le bloc ci-dessous qui va permettre l'affichage de la zone d'écriture :

.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #000000;
}

Le bloc s'appelle code, car vous pouvez ajouter autant de bloc que vous voulez avec des tailles différentes ou encore des images en fond.
Le nom du bloc changera, papillon par exemple si l'image représente un papillon, astuce etc...

Maintenant pour que la zone apparaisse dans votre article, une fois que vous avez terminé de le rédiger, passez en mode html en cliquant sur <> il ne reste plus qu'à entourer le texte concerné avec ces balises :

<p class="code"> </p>

Votre texte doit se trouver entre ses balises, il ne doit surtout pas y avoir de balises <p> ou </p> à l'intérieur, sinon ça ne peut pas marcher !
Pour les retours à la ligne, utiliser les <br> </br>.

Voila ce que ça donne dans mon message en mode thml :

<p class="fleur"><font color="#000000">Mon texte est dans la zone, il apparaitra dans un cadre avec une image en fond</font></p>

Mon texte est dans la zone, il apparaitra dans un cadre avec une image en fond

Pour changer la couleur du texte dans le cadre vous pouvez ajouter une balise couleur <font color="#000000"> </font>

Pour modifier le style, la couleur, la grandeur, l'image etc...c'est dans le bloc de la feuille de style bien sur...

.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #000000;
}

Pour mettre une image de fond prenez plutôt ce bloc et collez l'adresse de votre image dedans :

.code {
width: 700px;
border: 1px dashed #00FFFF;
margin-left: 1em;
padding: 5px 5px 5px 10px;
background: #C0C0C0 url("http://adresse de l'image.jpg");
}

Si votre image est petite et que vous mettez un cadre assez grand, votre image se répètera sur le fond du cadre.

Pour que votre image ne se répète pas, ajoutez no-repeat; comme ceci à la fin de cette ligne :

background: #C0C0C0 url("http://Adresse de l'image.jpg") no-repeat;

Vous pouvez harmoniser la couleur du fond en changeant le code couleur #C0C0C0.

Si vous voulez un cadre de la même taille que votre image, le width qui correspond à la largeur du cadre doit avoir la même taille que l'image.