### Graisse avec font-weight

La propriété font-weight permet de mettre du texte en gras.

Les spécifications définissent différentes valeurs possibles : `normal`, `bold`, `bolder`, `lighter`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `inherit`.
Dans la réalité seules 3 valeurs sont utilisables : `bold`, `normal` et `inherit`. `inherit` est la valeur par défaut car la propriété font-weight est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.

Exemple : graisse
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p>La Guerre des Etoiles du Milieu</p> <p>Il y a bien longtemps dans une <span class="gras">lointaine galaxie</span>, les <span class="gras">Gentils Jedis</span> de la Fédération de l'Empire du Commerce de la République se battent contre les <span class="gras">Méchants Gobelins</span> de la Comté du Mordor de l'infâme Sauron. </p> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } p:first-of-type { font-size: 1.3rem; font-weight: bold; } .gras { font-weight: bold; }

### Italique avec font-style

La propriété font-style permet de mettre du texte en italique. Toutes les polices n'ont pas une version italique ou oblique, en particulier les polices "exotiques" servant avant tout au titrage.

Les spécifications définissent différentes valeurs possibles : `normal`, `italic`, `oblique`, `inherit`.
Dans la réalité `italic` et `oblique` sont traitées de la même façon. `inherit` est la valeur par défaut car la propriété font-style est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.

Exemple : italique
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p>La Guerre des Etoiles du Milieu</p> <p>Il y a bien longtemps dans une <span class="italique">lointaine galaxie</span>, les <span class="oblique">Gentils Jedis</span> de la Fédération de l'Empire du Commerce de la République se battent contre les <span class="oblique">Méchants Gobelins</span> de la Comté du Mordor de l'infâme Sauron. </p> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } p:first-of-type { font-size: 1.3rem; font-style: italic; font-weight: bold; } .italique { font-style: italic; } .oblique { font-style: oblique; }

### Petites majuscules avec font-variant

La propriété font-variant change les caractères du texte. Pour le moment, la seule valeur ayant cet effet est `small-caps` qui met le texte en petites majuscules. C'est surtout intéressant pour le titrage.

Exemple : petites majuscules
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une <span class="maj">lointaine galaxie</span>, les <span class="maj">Gentils Jedis</span> de la Fédération de l'Empire du Commerce de la République se battent contre les <span class="maj">Méchants Gobelins</span> de la Comté du Mordor de l'infâme Sauron. </p> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } h3, span { font-variant: small-caps; }