Tuto : Personnaliser le texte

Dans cet article nous allons voir comment personnaliser le texte d'un site web sous toutes les coutures, ou presque (si j'oublie quelque chose, dites-le-moi en laissant un commentaire).

Tout d'abord, le texte en lui-même, il est possible de le modifier pour les points suivants :

• la police d'écriture,
• la taille,
• la couleur,
• le format.

Voici ci-dessous les lignes CSS qui vous permettront de personnaliser tous ces paramètres :

Exemple, pour un article :
.contenuArticle {
   font-family: "Microsoft Sans Serif", Times, Serif; /* Ici c'est le choix de la police d'écriture */
   font-size: 8px; /* Ici c'est le choix de la taille du texte */
   color: lightblue; /* Ici c'est le choix de la couleur du texte */
   font-weight: bold; /* Ici c'est le choix du format de texte */
}
Alors, maintenant, allons un peu plus loin, que faire si vous souhaitez un lien ou tout simplement décorer votre texte?

C'est très simple! Il vous suffit de jouer avec le CSS!

Procédons!
Voici pour le lien :
a { /* Ici c'est le lien tel qu'il va apparaître au départ dans votre site */
   color:#48b2e9; /* Ici c'est la couleur du lien */
   font-size:100%; /* Ici c'est la taille du lien */
}

a:hover { /* Voici le lien une fois survolé */
   border-bottom:1px dotted; /* Ici c'est le soulignage du lien (Particulier, on verra cela plus bas)*/
   color:#addcf5; /* Ici c'est la couleur du lien survolé */
}

a:visited { /* Et enfin, on trouve ici le lien une fois que vous avez cliqué dessus */
   color: #48b2e9; /* Ici c'est la couleur du lien visité */
}
Et maintenant, afférons-nous à la décoration du texte :

Pour décorer votre texte, vous pouvez lui assigner une couleur, un soulignage ou encore un encadrement.

Pour lui assigner une couleur il vous suffit d'ajouter :
.contenuArticle {
   color : #FFF ou nom de la couleur; /* Remplacez les FFF (ici blanc) par la couleur de votre choix */
}

Pour souligner un texte :

.contenuArticle {    text-decoration :	none; /* Texte sans décoration */
	underline; /* Texte souligné */
	overline; /* Texte souligné et surligné */
	blink; /* Texte qui clignote */
}	line-through; /* Texte barré */

Et enfin voilà la procédure pour encadrer un texte :
.contenuArticle {
   border : 1px solid black; /* Ici le texte est encadré par une ligne solide de couleur noire */
}
Voilà un lien dans lequel vous pourrez trouver les codes de couleur web : Codes couleur.


J'espère n'avoir rien oublié, sinon faites-le-moi savoir en laissant un commentaire!