Tutoriel CSS: Chapitre 2 - Le CSS et votre texte [Facile]

Introduction
Salut à tous ! Dans ce tutoriel, qui fait suite à celui-ci, nous allons voir toutes les applications que le CSS peut avoir sur votre texte comme changer sa taille, sa police, sa couleur...
Avant de commencer, je vous invite à relire le premier chapitre afin de vous rappeler les bases de CSS.

Changer la police
La composition d'un code de police se fait comme ceci:

Code:

p {
font-family: Arial,"Trebuchet MS", serif;
}

p indique le type d'élément sélectionné pour le changement de police, ici la balise de texte:

Code:

<p></p>

font-family indique que nous allons modifier la police de l'élément p.
Les noms de police signifient les polices qui vont être utilisées.
Ainsi, dans notre exemple, l'ordinateur va d'abord tenter d'utiliser la police Arial. Si l'utilisateur ne possède pas cette police, il tentera alors d'utiliser la police Trebuchet MS et ainsi de suite.
Notez qu'il faut entourer de guillemets les noms de polices contenant plusieurs mots.

Changer la taille du texte
Continuons donc avec notre zoli exemple qui va devenir très complet d'ici la fin du cours .

Code:

p {
font-family: Arial,"Trebuchet MS", serif;
font-size: 12px;
}

Rien de très compliqué à comprendre, la propriété font-size indique que nous allons modifier la taille du texte et la valeur 12px indique que l'élément p mesurra 12 pixels.
Dans ce tutoriel, nous ne verrons que la méthode de notation en pixels mais sachez qu'il en existe d'autres:
*Une méthode simplifiée avec des valeurs renvoyant à des tailles prédéterminées (xx-small, medium, large...).
*Une méthode en pourcentages.
*Deux méthodes plus compliquées renvoyant à d'autres tailles.
Donc, pour régler la taille de votre texte, vous n'aurez qu'à changer le chiffre situé avant px .

Mettre le texte en gras et en italique
Reprenons notre petit exemple :

Code:

p {
font-family: Arial,"Trebuchet MS", serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
}

Je vous rassure, plus tard, nous apprendrons à regrouper toutes ces informations dans une seule méga-propriété.
Donc, ici, la propriété font-weight permet de régler le niveau de gras de l'élément p.
Elle peut prendre plusieurs valeurs (bold: gras, bolder: très gras, lighter: fin et normal).
La propriété font-style indique le niveau d'italique de l'élement.
Elle peut aussi prendre plusieurs valeurs (italic: italique et normal).

Autres
Ca y'est, nous avons enfin passé le plus facile du tutoriel ^^.
Dans cette partie, nous allons apprendre d'autres options permettant par exemple de souligner, faire clignoter ou mettre en majuscule le texte.
Reprenons une nouvelle fois notre exemple:

Code:

p {
font-family: Arial,"Trebuchet MS", serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
text-decoration: blink;
text-transform: lowercase;
}

Ici, la propriété text-decoration permet de "décorer" l'élément p.
Elle peut avoir de nombreuses valeurs différentes (overline: traçant une ligne au dessus de l'élément, blink: le faisant clignoter, line-through: le barrant, underline: le soulignant et none: ne faisant rien).
La propriété text-transform, quant à elle, permet de "transformer" l'élément p.
Elle peut avoir plusieurs valeurs: (uppercase: mettant tout l'élement en majuscules, lowercase: le mettant en minuscules, capitalize: mettant toutes les premières lettres des mots en majuscules et none: ne faisant rien).

Changer la couleur du texte
Nous arrivons maintenant à la dernière notion que nous allons voir avant la méga-propriété.

Code:

p {
font-family: Arial,"Trebuchet MS", serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
text-decoration: blink;
text-transform: lowercase;
color: #000000;
}

La propriété color permet de changer la couleur de l'élément et #000000 est la notation hexadécimale de la couleur utilisée.
Je ne vais pas m'attarder plus sur ce sujet, je vous renvoie à la partie "Un fond en couleur" du chapitre précédent vous expliquant en détail l'utilisation du changement de couleurs.
Sachez que toutes les techniques étudiées dans la chapitre 1 concernant le changement de couleur peuvent êtres utilisées ici.

Méga-propriété
Nous allons maintenant voir comment réduire notre code qui est un peu grand quand même ^^.

Code:

p {
font: bold, 12px, Arial, "Trebuchet MS", serif;
color: #000000;
}

L'exemple ci-dessous représente une possibilité de méga-propriété.
Attention: vous êtes obligé de placer la(les) police(s) utilisée(s) à la fin de la propriété et la couleur ne peut être placée dans la propriété.

Nous voici à la fin de ce tutoriel, j'espère vous avoir expliqué cette notion très utile de CSS et je vous donne rendez-vous pour un nouveau tuto;).

Merci d'avoir lu ce tutoriel .
Pour les questions, Aide .

Edit Kajuzbonuz: Je lock, et je t'attribue 90 crédits pour ce bon tutoriel.