We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

 

Dans cet article, vous allez faire vos premiers pas sur le chemin de la maîtrise de style du texte avec CSS. Nous passerons en revue les principes de base de la mise en forme du texte, y compris l'application d'une casse, d'une police de caractères, de ses taille et couleur, l'alignement du texte, l'espacement entre les lignes et les caractères et d'autres effets encore.

Prérequis : Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectifs : Après lecture de cet article, vous serez capable de mettre en page un texte et d'en modifier la présentation pour en améliorer la compréhension.

En quoi consiste la mise en forme du texte avec CSS ?

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte présent dans un élément est placé à l'intérieur de la boîte de contenu de cet élément (content box). Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues RTL : qui s'écrivent de droite à gauche) et continue vers la fin de la ligne. Une fois arrivé en bout de ligne, il descend à la ligne suivante et continue, puis la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textes se comportent comme une série d'éléments "inline" disposés sur des lignes adjacentes. Aucun saut de ligne n'est produit avant d'atteindre la fin de la boîte, sauf si vous ajoutez manuellement un saut de ligne à l'aide de la balise dédiée : l'élément <br>.

Note : si le précédent paragraphe vous pose un problème de compréhension, pas de panique — révisez d'abord le modèle de boîte avant de poursuivre.

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

  • Styles de la police de caractères : Ces propriétés impactent les caractères du texte auxquels elles sont appliquées, affectant la police, sa taille, et d'autres caractéristiques comme gras, italique, etc.
  • Styles de mise en page du texte : Ces propriétés affectent les espaces et autres fonctionnalités de mise en page du texte, comme par exemple, l'espace entre les lignes et les caractères, et  l'alignement du texte  dans la boîte de contenu.

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que <span> ou <strong>, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

Polices de caractères

Passons directement aux propriétés de style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

<h1>Tommy le chat</h1>

<p>Je me souviens, comme si c'était il y a un repas seulement...</p>

<p>Dit Tommy le chat en se détournant pour effacer tout ce qui pourrait 
être tombé dans le poil de son puissant poitrail. Beaucoup de gros rats 
de ruelle avaient trouvé la mort, tout en fixant les points blancs sous
la fusée sombre de cette impressionnante machine rôdeuse. Vraiment, une 
merveille de la nature ce prédateur urbain — Tommy le chat avait beaucoup 
d'histoires à raconter. Mais il avait rarement l'occasion de les commencer
comme cela.</p>

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

Couleur

La propriété color définit la couleur du contenu de premier plan des éléments sélectionnés (qui est généralement du texte, mais peut inclure d'autres choses comme un caractère souligné ou un tiret large utilisés avec la propriété text-decoration pour améliorer le texte.

color peut accepter toutes les unités de couleur CSS, par exemple :

p {
  color: red;
}

Cela entraînera la couleur rouge des paragraphes, plutôt que le noir par défaut du navigateur, comme suit :

Familles de polices de caractères

Pour définir différentes polices de caractères pour le texte, vous pouvez utiliser la propriété font-family ; cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  police par défaut . Un exemple simple pour voir cela :

p {
  font-family: arial;
}

Cette commande définit la police de caractères Arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

Polices web sûres

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les soi-disant polices web sûres.

La plupart du temps, en tant que développeurs web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher notre contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

La liste des polices web sûres changera à mesure que les systèmes d'exploitation évolueront, mais il est acceptable de considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

Nom Type générique Notes
Arial sans-serif Il est souvent considéré comme une bonne pratique d'ajouter Helvetica comme alternative préférée à Arial car, bien que leurs apprences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus largement disponible.
Courier New monospace Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgia serif  
Times New Roman serif Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MS sans-serif Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation mobiles.
Verdana sans-serif  

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS, qui peut vous aider à prendre une décision quant à ce que vous considérez comme sûr pour votre usage.

Note : Il existe un moyen de télécharger une police personnalisée pour une page Web, pour vous permettre de personnaliser votre utilisation de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

Polices par défaut

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. Ceux-ci sont très génériques, et la police de caractères exacte utilisée, lors de l'emploi de ces noms génériques, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver au moins une police qui semble appropriée. serif, sans-serif et monospace sont tout à fait prévisibles et devraient fournir quelque chose de raisonnable. Par contre, cursive et  fantasy sont moins prévisibles et nous vous recommandons de les utiliser très précautionneusement, en les testant au fur et à mesure.

Les 5 noms sont définis comme suit :

Terme Définition Exemple
serif Les polices qui ont des empattements (les fioritures et autres petits détails que vous voyez aux extrémités des traits dans certaines polices de caractères) Mon grand éléphant rouge
sans-serif Les polices qui n'ont pas d'empattements Mon grand éléphant rouge
monospace Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes. Mon grand éléphant rouge
cursive Les polices destinées à émuler l'écriture, avec des traits fluides et connectés. Mon grand éléphant rouge
fantasy Les polices destinées à être décoratives. Mon grand éléphant rouge

Piles de polices

Puisque la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez fournir une pile de polices afin que le navigateur dispose de plusieurs polices de caractères. Cela implique simplement une valeur font-family constituée de plusieurs noms de polices séparés par des virgules, par exemple :

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Dans un tel cas, le navigateur démarre au début de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante, et ainsi de suite.

C'est une bonne idée de fournir un nom de police générique approprié à la fin de la pile, de sorte que si aucune des polices listées n'est disponible, le navigateur peut au-moins fournir quelque chose de convenable. Pour souligner ce point, les paragraphes donnent la police serif par défaut du navigateur si aucune autre option n'est disponible - généralement Time New Roman - et ce n'est pas bon pour remplacer une police sans-serif !

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

Un exemple de font-family

Ajoutons à notre exemple précédent, en donnant aux paragraphes une police sans-serif :

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Cela donne le résultat suivant :

Taille de la police de caractères

Dans notre article précédent Valeurs et unités CSS, nous avons révisé les longueur et taille des unités. La taille des polices de caractères (définie avec la propriété font-size) peut prendre des valeurs mesurées dans la plupart de ces unités (et d'autres comme les pourcentages), cependant, les unités les plus courantes que vous utiliserez pour dimensionner le texte sont:

  • px (pixels) : Le nombre de la hauteur en pixels que vous souhaitez pour le texte. C'est une unité absolue — il en résulte la même valeur calculée finale pour la police sur la page dans à peu près n'importe quelle situation.
  • em : 1 em est égal à la taille de police définie sur l'élément parent de l'élément courant auquel nous voulons appliquer un style (plus précisément, la largeur d'une lettre majuscule "M" contenue dans l'élément parent). Cela peut devenir difficile à résoudre si vous avez beaucoup d'éléments imbriqués avec des tailles de police différentes, mais cela est faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter? C'est assez naturel, une fois que vous vous y êtes habitué, et vous pouvez utiliser em pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné en utilisant em , ce qui facilite la maintenance.
  • rem : Il fonctionne comme em, excepté qu'1 rem est égal à la taille de la police sur l'élément racine du document (c'est-à-dire <html>), pas l'élément parent). Cela rend beaucoup plus facile le calcul des tailles de police, mais malheureusement les rem ne sont pas supportés par Internet Explorer 8 et en-dessous. Si vous avez besoin de supporter des navigateurs plus anciens avec votre projet, vous pouvez utiliser soit em soit px, soit utiliser un polyfill tel que REM-unit-polyfill.

La font-size d'un élément est héritée de son élément parent. Tout commence par l'élément racine de l'ensemble du document<html> — la font-size qui est de 16 px en standard sur les navigateurs . Tout paragraphe (ou tout autre élément qui n'a pas une taille différente définie par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément <h1> a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, si vous avez un élément <article> dans votre page, et définissez sa taille de police à 1.5 em (24 px), puis, si vous souhaitez pour les paragraphes de l'<article> une taille de police calculée de 20 px, quelle valeur em utiliseriez-vous?

<!-- document base : la taille de la police est 16 px -->
<article> <!-- Si ma taille de police est 1.5 em -->
  <p>My paragraph</p> <!-- Comment passer la taille de police à 20p x ? -->
</article>

Vous devez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous stylisez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples, et éviter de définir la taille des polices des éléments du conteneur lorsque cela est possible.

Un exemple de dimensionnement simple

Lorsque vous dimensionnez votre texte, c'est généralement une bonne idée de définir la taille de police de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler - les valeurs requises (r) em sont alors la taille de police du pixel par 10, pas 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous vos jeux de règles de taille de police dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

Notre nouveau résultat ressemble à :

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Style et poids de police, transformation et décoration de texte

CSS fournit quatre propriétés communes pour modifier le poids / l'emphase visuelle du texte :

  • font-style : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) :
    • normal : règle le texte en police normale (suppression du style italique existant).
    • italic : règle le texte avec la version italique de la police si elle est disponible ; si elle n'existe pas, le style italique sera simulé avec l'option oblique.
    • oblique : règle le texte en simulant une version simulée du texte en italique, créée par inclinaison de la version normale.
  • font-weight : Définit l'intensité du texte. La propriété peut avoir de nombreuses valeurs selon que vous avez de nombreuses variantes de polices disponibles (comme -light, -normal, -bold, -extrabold, -black, etc.), mais en réalité, vous les utiliserez rarement en dehors de normal et bold (gras):
    • normal, bold : poids de police normal et bold.
    • lighter, bolder : définit l'intensité de l'élément en cours pour qu'il soit plus léger ou plus lourd que son élément parent.
    • 100900 : les valeurs numérique de l'intensité qui fournissent un contrôle plus fin que les mots-clés ci-dessus, si nécessaire.
  • text-transform : Vous permet de définir les transformations de votre police. Les valeurs comprennent :
    • none : aucune transformation.
    • uppercase : transforme TOUT LE textE EN capitalES.
    • lowercase : transforme tout le texte en minuscules.
    • capitalize : transforme Tous Les Mots Avec La Première lettre capitalisée.
    • full-width : transforme tous les glyphes à écrire à l'intérieur d'un carré à largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
  • text-decoration: Définit / désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont :
    • none: désactive les décorations du texte déjà présentes.
    • underline: souligne le texte.
    • overline: donne au texte une ligne au-dessus.
    • line-throughbarre le texte.
    Vous devez noter que text-decoration peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que text-decoration est une propriété raccourcie pour text-decoration-line, text-decoration-style et text-decoration-color. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

Notre nouveau résultat ressemble à :

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Ombres du texte

Vous pouvez appliquer des ombres à votre texte en utilisant la propriété text-shadow. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

text-shadow: 4px 4px 5px red;

Les 4 propriétés sont les suivantes :

  1. Le décalage horizontal de l'ombre du texte original cela peut prendre la plupart des unités de longueur et de taille CSS disponibles, mais vous utiliserez le plus souvent px. Cette valeur doit être incluse.
  2. Le décalage vertical de l'ombre du texte original ; se comporte fondamentalement comme le décalage horizontal, sauf qu'il déplace l'ombre vers le haut / bas, pas vers la gauche / droite. Cette valeur doit être incluse .
  3. Le rayonnement du floutage une valeur plus élevée signifie que l'ombre est dispersée plus largement. Si cette valeur n'est pas incluse, la valeur par défaut est 0, ce qui signifie qu'il n'y a pas de flou. Elle peut prendre toutes les unités de longueur et de taille CSS.
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas incluse, le noir est par défaut.

Note: Les valeurs positives de décalage positionnent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

Ombres multiples

Vous pouvez appliquer de multiples ombres dans le même texte, en incluant plusieurs valeurs d'ombre séparées par une virgule, par exemple:

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

Si nous l'appliquions à l'élément <h1> dans notre exemple Tommy le chat, nous nous retrouverions avec ceci :

Note: Vous pouvez voir plus d'exemples intéressants sur utilisation -shadow dans l'article Sitepoint Moonlighting with CSS text-shadow.

Mise en page du texte

Après les propriétés de base de la police, examinons maintenant les propriétés que nous pouvons utiliser pour affecter la disposition du texte.

Alignement du texte

La propriété text-align est utilisée pour contrôler comment le texte est aligné dans la zone qui le contient. Les valeurs valides sont les suivantes, et fonctionnent à peu près de la même manière que dans une application de traitement de texte :

  • left: le texte est aligné à gauche.
  • right: le texte est aligné à droite.
  • center: le texte est centré.
  • justify: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes de texte. Vous devez l'utiliser avec discernement il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme hyphens, pour couper certains des mots les plus longs entre les lignes.

Si nous appliquons text-align: center; à l'élément <h1> dans notre exemple, nous aurons :

Hauteur de ligne

La propriété line-height définit la hauteur de chaque ligne de texte elle peut prendre la plupart des unités de longueur et de taille, mais peut également prendre une valeur sans unité, qui agit comme un multiplicateur et considéré habituellement comme la meilleure option le font-size est multiplié pour obtenir la line-height (hauteur de ligne). Le corps du texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir nos lignes de texte à 1,5 fois la hauteur de la police, vous utiliserez ceci :

line-height: 1.5;

En appliquant ceci aux éléments <p>  de notre exemple, nous obtiendrons ce résultat :

Espacement entre les lettres et les mots

Les propriétés letter-spacing et word-spacing vous permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

Si nous appliquons les paramètres suivants à la première ligne des éléments <p> dans notre exemple :

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

Nous obtiendrons :

D'autres propriétés intéressantes

Les propriétés ci-dessus vous donnent une idée de la façon de commencer à donner du style au texte sur une page web, mais il y a beaucoup d'autres propriétés que vous pourriez utiliser. Nous voulons juste évoquer les plus importantes ici. Une fois familiarisé avec l'utilisation de ce qui précède, vous devriez également explorer ce qui suit :

Styles de police de caractères :

  • font-variantbascule entre petites majuscules et police normale, et réciproquement.
  • font-kerningactive et désactive les options de crénage des polices.
  • font-feature-settings : active et désactive les fonctionnalités des polices de caractères OpenType.
  • font-variant-alternatescontrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.
  • font-variant-caps: contrôle l'utilisation de glyphes alternatifs en capitales.
  • font-variant-east-asian : contrôle l'utilisation de glyphes alternatifs pour l'écriture est-asiatique, comme japonais et chinois.
  • font-variant-ligaturescontrôle les ligatures et formes contextuelles utilisées dans le texte.
  • font-variant-numericcontrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
  • font-variant-positioncontrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.
  • font-size-adjustajuste la taille visuelle de la police indépendamment de sa taille réelle.
  • font-stretch : bascule entre les versions étirées alternatives possibles d'une police donnée.
  • text-underline-positionspécifie la position du soulignement défini à l'aide de la valeur  underline pour la propriété text-decoration-line .
  • text-renderingessaye d'effectuer une optimisation du rendu du texte.

styles de mise en page du texte

  • text-indent : indique combien d'espaces horizontaux doivent rester avant le début de la première ligne du contenu du texte.
  • text-overflowdéfinit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).
  • white-spacedéfinit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.
  • word-break : spécifie s'il y a césure dans les mots.
  • direction : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte. )
  • hyphensactive et désactive la césure pour les langues prises en charge.
  • line-break : détend ou renforce la rupture de ligne pour les langues asiatiques.
  • text-align-lastdéfinit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.
  • text-orientation : Définit l'orientation du texte dans une ligne.
  • word-wrap: indique si le navigateur peut casser une ligne dans l'ordre des mots afin d'empêcher le débordement.
  • writing-modedéfinit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.

Propriétés raccourcies de police de caractères

De nombreuses propriétés des polices de caractères peuvent aussi être déclarées avec les propriétés raccourcies font. Elles sont écrites dans l'ordre suivant :  font-style, font-variant, font-weight, font-stretch, font-size, line-height et font-family.

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque les propriétés raccourcies  font sont utilisées.

Une barre oblique doit être placée entre les propriétés font-size et line-height.

Un exemple complet ressemblerait à ceci :

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Apprentissage actif : Jouer avec les styles de texte

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à faire : nous voulons juste vous permettre de jouer avec certaines propriétés de police / mise en page de texte, et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne, ou en entrant votre code dans l'exemple éditable en direct ci-dessous.

Si vous faites une erreur, vous pouvez toujours réinitialiser en utilisant le bouton Reset.

Résumé

Nous espérons que vous avez aimé jouer avec du texte ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, Oliv
Dernière mise à jour par : loella16,