Les objectifs

La mise en forme du texte avec les CSS s’applique à de nombreux types de texte. Les styles des caractères vont permettre de personnaliser les polices de caractères et leur taille, les styles pour le texte vont notamment appliquer des couleurs et des décorations et enfin, les styles pour les conteneurs vont s’appliquer directement aux listes, aux citations et aux formulaires par exemple.

Les styles pour les caractères

1. Les polices de caractères génériques

Avant de choisir une police de caractères spécifique, il faut bien penser à se poser la bonne question : « Est-ce que cette police est présente sur l’ordinateur du visiteur du site ? » S’il y a le moindre doute, il faut alors utiliser une police « générique » dont la présence est quasiment assurée sur tous les ordinateurs du monde.

Il existe trois familles génériques usuelles qui se trouvent installées sur la majorité des plateformes :

La famille de fonte à largeur fixe, avec les polices Courrier New pour Windows, Courrier pour macOS et Monospace pour Linux.
La famille de fonte à empattement, avec les polices Times pour Windows, Times New Roman pour macOS et Serif pour Linux.
La famille de fonte sans empattement, avec les polices Arial pour Windows, Helvetica pour macOS et sans-serif pour Linux.

à ces trois familles historiques, il existe deux polices de caractères spécialement créées pour le Web : Verdana (sans empattement) et Gorgia (avec empattement).

Pour déclarer une police de caractères génériques, il faut utiliser la propriété font-family dans une règle CSS. Voici un exemple simple :

<!doctype html>  
<html lang="fr">  
<head>  <meta charset="UTF-8">  
<title>Titre de la page</title>  
<style>  
  p.sans-empattement {  
    font-family: verdana, arial, helvetica, sans-serif ;  
  }  
  p.avec-empattement {  
    font-family: georgia, times, "times new roman", serif ;  
  }  
 ...

Les styles pour le texte

Toutes les propriétés CSS qui vont suivre pourront être appliquées à des éléments HTML en ligne, comme des liens <a>, des divisions <span>... ou bien sur des éléments de type bloc comme des paragraphes <p>, des titres <hx>, des citations <blockquote>... Il sera aussi possible de les appliquer à des textes, des tableaux, des formulaires…

1. Les couleurs

C’est la propriété color qui permet de modifier la couleur du texte. Il faut se reporter au chapitre Les feuilles de styles, à la section Les notations des couleurs, pour revoir les notations utilisables pour les couleurs.

Dans cet exemple très simple, deux couleurs sont appliquées, avec deux notations différentes, à deux éléments <span> :

<!doctype html>   
<html lang="fr">  
<head>  
<meta charset="UTF-8">  
<title>Titre de la page</title>  
<style>  
  .bleu {  
    color: blue ;  
  }  
  .bleu-fonce {  
    color: rgb(10,21,252) ;  
  }  
</style>  
</head>  
<body>  
<p>Aenean lacinia <span class="bleu">bibendum nulla</span> sed 
consectetur. Curabitur <spanclass="bleu-fonce">blandit tempus</span>  
porttitor.</p>  
</body>  
</html>

2. Les lignes de décoration

Les lignes de décoration permettent d’appliquer une ligne, au-dessus, en dessous ou en travers du texte, et il est possible d’ajouter une couleur et un type à ces lignes. Voici les trois propriétés à utiliser :

text-decoration-line pour définir la position de la ligne. Les valeurs possibles sont : none, underline, overline, line-through, underline overline et underline line-through.
text-decoration-color pour choisir la couleur de la ligne.
text-decoration-style pour appliquer un type de ligne (pointillée, hachurée…). Voici les valeurs utilisables : solid, double, dotted, dashed et wavy.

Il est possible d’utiliser la syntaxe raccourcie...

Les styles pour les listes

1. Les énumérations

Les listes à puces s’insèrent avec l’élément <ul> et les listes numérotées avec <ol>. Chaque item de ces deux listes s’ajoute avec un élément <li>. Les listes de définitions s’utilisent avec les éléments <dt> et <dd>. Pour tous ces éléments, les styles CSS pour le texte vus précédemment peuvent parfaitement s’appliquer.

Le symbole d’énumération placé devant chaque item d’une liste numérotée ou à puces peut être choisi avec la propriété list-style-type.

Pour les listes à puces, voici les valeurs utilisables :

disc : puce noire et pleine, c’est la valeur par défaut.
circle : puce creuse, blanche en son centre.
square : carré noir et plein.

Pour les listes numérotées, voici les principales valeurs utilisables :

decimal : chiffres entiers, c’est la valeur par défaut.
decimal-leading-zero : chiffres entiers, mais avec un 0 comme préfixe.
lower-roman : chiffres romains minuscules.
upper-roman : chiffres romains majuscules.
lower-alpha ou lower-latin : lettres minuscules.
upper-alpha ou upper-latin : lettres majuscules.

Voici un exemple simple :

<!doctype html>  
<html lang="fr">  
<head>  
<meta...

Les styles pour les tableaux

1. La bordure du tableau

Il est possible d’appliquer des bordures aux tableaux et aux cellules des tableaux. Dans l’exemple suivant, la première étape consiste à ajouter une bordure au tableau. Cette bordure va se placer uniquement sur le pourtour du tableau.

Voici le code HTML du tableau qui est utilisé :

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Ma page web</title>  
<style>  
  #resultats {  
    border: 1px solid #333;  
  }  
</style>  
</head>  
<body>  
<table id="resultats">  
  <caption>Résultats 2018</caption>  
  <tr>  
    <th>Janvier</th>  
    <th>février</th>  
    <th>Mars</th>  
  </tr>  
  <tr>  
    <td>123</td>  
    <td>134</td>  
    <td>156</td>  
  </tr>  
  <tr>  
    <td>213</td>  
   ...

Les styles pour les formulaires

1. Les états actif et inactif des objets

Il faut rappeler que les pseudo-classes :enabled, :disabled et :checked permettent de spécifier les états des objets dans les formulaires. Il est possible de les utiliser dans des règles CSS pour mettre en forme des objets de formulaire, en fonction de leur état.

Voici le formulaire utilisé :

<form id="formulaire" method="#" action="#">  
  <p>  
    <label for="nom">Votre nom : </label>  
    <input type="text" id="nom">  
  </p>  
  <p>  
    <label for="age">Votre âge : </label>  
    <input type="text" id="age" disabled>  
  </p>  
  <p>  
    <input type="radio" name="sexe" id="homme" value="homme">  
    <label for="homme">Homme</label>  
    <br>  
    <input type="radio" name="sexe" id="femme" value="femme">  
    <label for="homme">Femme</label>  
  </p>  
  <p>  
    <input type="checkbox" id="accord" />  
    <label for="accord">Je suis d'accord avec le réglement</label> 
  </p>  
</form>

Voici la structure de ce formulaire :

Un champ de saisie Votre nom qui est actif par défaut.
Un champ de saisie Votre âge qui est inactif, avec l’attribut booléen disabled.
Un groupe de boutons radio, avec...

Les styles pour les colonnes

1. Les colonnes de texte

Le module CSS Multi-column Layout Module Level 1 (https://www.w3.org/TR/css-multicol-1/) donne la possibilité de créer des colonnes de texte qui permettront au texte inclus de passer d’’une colonne à l’autre en fonction de la largeur d’écran disponible. Il est possible d’appliquer des colonnes à tout type de conteneur : <body>, <div>, <article>…

2. La mise en place des colonnes

Dans cet exemple, c’est une simple boîte <div> qui contiendra deux colonnes, une gouttière et un filet vertical pour séparer les deux colonnes. Dans cette boîte <div>, deux paragraphes de texte seront inclus.

Voici le code de cet exemple :

<!doctype html>  
<html lang="fr">  
 <head>  
  <meta charset="UTF-8">  
  <title>Ma page web</title>  
  <style>  
   .maCol {  
    column-count: 2 ;  
    column-gap: 1em ;  
    column-rule: thin solid black ;  
    border: thin solid black ;  
   }  
   .maCol p {  
    margin-top : 0 ;     
   }  
 </style>  
</head>  
<body>  
 <div class="maCol">  
   <p>Lorem ipsum dolor sit amet...</p>  
   <p>Donec hendrerit ultricies tellus...</p>  
 </div>  
</body>  
</html>

Voici le détail des règles CSS pour la mise en place des colonnes :

.maCol : c’est le nom de la classe.
column-count: 2 : indique qu’il y a deux colonnes.
column-gap: 1em : spécifie que l’espace entre les deux colonnes est de 1em. C’est la gouttière en PAO. Il est bien sûr possible d’utiliser n’importe quelle unité.
column-rule: thin solid black : indique que le filet vertical qui sépare les deux colonnes a une épaisseur thin, en trait plein, solid et de couleur noire, black.

Voici l’affichage obtenu sur un petit écran :

Voici l’affichage des colonnes avec une largeur d’écran un peu plus grande, le texte passe bien d’une colonne à l’autre. L’affichage du texte est fluide.

3. Des images dans les colonnes

Il est possible d’inclure d’autres éléments HTML dans des colonnes. Dans cet exemple, deux image sont insérées : une image fixe et une image flottante.

Voici le code de cet exemple :

<!doctype html>  
<html lang="fr">  
 <head>  
  <meta charset="UTF-8">  
  <title>Ma page web</title>  
  <style>  
   .maCol {  
    column-count: 2 ;  
    column-gap: 1em ;  
    column-rule: thin solid black ;  
    border: thin solid black ;  
   }  
   .maCol p {  
    margin-top : 0 ;     
   }  
   .maCol #hippo {  
    width: 100% ;  ...