La mise en forme des textes permet de changer les polices de caractères, de mettre en gras, en couleur, en italique, de souligner et beaucoup d'autres choses encore.

`font-family`

font-family permet de spécifier la famille de police pour le texte.

Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix :

La règle précédente signifie que la police utilisée pour les paragraphes doit être Helvetica. Si cette police est absente du poste utilisateur, ce sera la police Verdana. Si cette dernière est également absente, ce sera la police de type sans-serif par défaut du système.

On distingue les familles suivantes :

serif (police avec empattements)
sans-serif (sans empattements)
monospace (police à chasse fixe, souvent utilisée pour afficher du code)
cursive
fantasy

Certains noms de police comportent des espaces, il faut alors utiliser des guillemets :

Pour résoudre le problème des fontes non disponibles sur le poste client, il existe une @-règle : @font-face. Voir le détail sur w3schools.

`font-size`

font-size permet de préciser la taille de police utilisée. Il existe deux types d'unités :

les unités absolues : px (pixels), cm (centimètres), ...
les unités relatives : % (par rapport à la taille de police du conteneur), em, ...

Dans l'exemple qui précède, en cas d'imbrication de div, chaque div utilisera une police de taille 80% de son conteneur. On peut donc vite se retrouver avec des tailles de police très petites. L'exercice n°1 permettra de s'en rendre compte.

Pour pallier à ce problème, Css3 a ajouté l'unité rem qui permet de définir la taille de police par rapport à la taille de police utilisée à la racine (la taille de police définie pour l'élément html).

Autres propriétés css

font-weight permet de définir la graisse de la police (valeurs possibles) ;
font-style permet d'afficher du texte en italique ;
text-decoration permet de souligner l'élément sélectionné ;
font-variant permet d'afficher du texte en petites majuscules.

Toutes ces propriétés peuvent être modifiées dans le bac à sable ci-dessous.

Ressources sur le net

Sur les règles de style :

Des fontes libres :

Bac à sable : Apparence du texte

Dans ce bac à sable, les dimensions sont en pixels.

Ci-contre, on peut modifier à loisir l'apparence du texte du paragraphe.

Code Css :

p {                                 	/* Mise en forme des paragraphes */
	color : #000000;                /* Couleur du texte */
	font-size : 11px;               /* Taille de la police en pixels */
	font-family : Times New Roman;  /* Police de caractère */
	font-weight : normal;           /* Graisse de la police */
	font-style : normal;            /* Apparence de la police */
	text-decoration : none;         /* Décoration de la police */
	font-variant : normal;          /* Affichage de la police */
	}

Observez l'effet d'une déclaration relative de la taille en cas d'imbrication.
Modifiez le Css pour que la police soit de même taille que le div père pour les div enfants d'un div.

Affichage à obtenir ?
Une solution ?

Modifiez le Css afin que la première ligne de chaque paragraphe soit en petites majuscules.

Actuellement, mon immeuble est sens dessus dessous.
	Tous les locataires du dessous voudraient habiter au-dessus. Tout cela
	parce que le locataire qui est au-dessus est allé raconter par en dessous
	que l'air que l'on respirait à l’étage au-dessus était meilleur que celui
	que l'on respirait à l’étage en dessous.


	Alors, le locataire qui est en dessous a tendance à envier celui qui est
	au-dessus et à mépriser celui qui est en dessous.
	Moi, je suis au-dessus de ça.
	Si je méprise celui qui est en dessous, ce n'est pas parce qu'il est en
	dessous, c'est parce qu'il convoite l'appartement qui est au-dessus, le
	mien.


	Remarquez... moi, je lui céderais bien mon appartement à celui du dessous
	à condition d'obtenir celui du dessus. Mais je ne compte pas trop dessus.
	D'abord parce que je n'ai pas de sous. Ensuite, au-dessus de celui qui
	est au-dessus, il n'y a plus d'appartement. Alors, le locataire du dessous
	qui monterait au-dessus obligerait celui du dessus à redescendre en dessous.
	Or, je sais que celui du dessus n'y tient pas. D'autant que, comme la
	femme du dessous est tombée amoureuse de celui du dessus, celui du dessus
	n'a aucun intérêt à ce que le mari de la femme du dessous monte au-dessus.
	Alors, là-dessus ... quelqu'un est-il allé raconter à celui du dessous
	qu'il avait vu sa femme bras dessus, bras dessous avec celui du dessus ???
	Toujours est-il que celui du dessous l'a su.
	Et un jour que la femme du dessous était allée rejoindre celui du dessus,
	comme elle retirait ses dessous ... et lui, ses dessus ... soi-disant
	parce qu'il avait trop chaud en dessous ... Je l'ai su .. parce que d'en
	dessous, on entend tout ce qui se passe au-dessus ...
	Bref! Celui du dessous leur est tombé dessus. Comme ils étaient tous les
	deux soûls, ils se sont tapés dessus. Finalement, c'est celui du dessous
	qui a eu le dessus!

Une piste ?
Affichage à obtenir ?
Une solution ?

Il faut utiliser le pseudo-élément ::first-line.

Dans le fichier qui suit, sans toucher au code Html :

Encadrer par une bordure verte chacune des listes.
Mettre sous fond jaune le dernier item de chaque liste.
Écrire en italique le premier item de chaque liste.
Écrire en petite majuscule l'élément d'identifiant id="important".
Écrire en gras tout ce qui n'a pas un attribut class="coucou".

Une piste ?
Affichage à obtenir ?
Une solution ?

En plus du pseudo-élément :nth-of-type(), on peut utiliser les sélecteurs :first-of-type et :last-of-type pour cibler respectivement le premier et le dernier élément d'un conteneur parent.