3. Mise en forme d’un texte avec CSS

Table des matières

Sans CSS, le texte est ennuyeux. Le CSS possède plusieurs propriétés qui peuvent être appliquées à tout type de texte, comme les paragraphes et les titres.

Pour le rendre plus agréable à lire, il faut y apporter des améliorations telles que l’ajout de couleurs, le réglage de l’alignement, voire même changer sa police d’écriture, etc.

Les couleurs avec CSS

Dans les récents chapitres sur les CSS, nous avons vu comment la couleur du texte peut être modifiée à l’aide de la propriété « color« .

La propriété  » color  » peut avoir trois types de valeurs :

  • le nom de la couleur,
  • sa valeur hexadécimale
  • ou sa valeur RGB.

Voici par exemple la valeur hexadécimale pour obtenir du rouge :

p {
   color :#FF0000;
}

Si vous voulez récupérer le code hexadécimal d’une couleur, vous pouvez utiliser la pipette de Photoshop mais aussi des sites comme https://color.adobe.com/fr/create qui proposent en prime des ensemble de couleurs (des “palettes”) qui s’accordent bien ensemble.

Voyons maintenant quelques propriétés utiles sur tous types de travaux web.

Quelques propriétés utiles

Changer la couleur de fond

Vous pouvez ajouter autant de règles que vous le souhaitez à chacun de vos sélecteurs : par exemple, si vous voulez modifier et la couleur du texte, et la couleur de fond du texte du paragraphe <p>, vous pouvez ajouter la propriété “background-color” :

p {
   color :#FF0000;
   background-color:#000000;
}

La décoration du texte

Si vous voulez ajouter un effet à votre texte (soulignement, barré ou autre) vous pouvez jouer avec la propriété “text-decoration”

Exemple pour souligner tout le texte contenu dans vos paragraphes :

p {
   color :#FF0000;
   background-color:#000000;
   text-decoration:underline;
}

Voici ce que ça donne sur 2 paragraphes :

(ça pique un peu les yeux vous ne trouvez pas ? Je vous laisse trouver d’autres combinaisons de couleurs plus agréables !)

Pour voir tout ce qu’il est possible de faire avec la propriété text-decoration, vous pouvez jeter un oeil sur le site de Mozilla qui les énumère : https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration

Faites quelques essais pour voir ce que ça donne !

L’alignement du texte

Par défaut, le texte est toujours aligné sur le côté gauche du conteneur. Mais nous pouvons également modifier l’alignement à l’aide de CSS.

La propriété « text-align » définit l’alignement horizontal.

Elle peut avoir quatre valeurs :

  • left,
  • right,
  • center
  • et justify

Commençons par créer le document index.html pour notre test :

<!DOCTYPE html>
<html lang="fr">

<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css" />
   <title>Test css</title>
</head>

<body>
   <p id="firstp">Voici un paragraphe à gauche: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nibh ante. Donec quis efficitur eros, et cursus nibh. Praesent ac erat lobortis, pharetra nunc ac, consequat ex. Integer vel maximus quam. Cras quis ex vitae orci luctus cursus. Sed venenatis tincidunt ante ut tempus. Donec et felis tellus. Nam elementum, ante sit amet mollis ultricies, quam ligula placerat lacus, non tincidunt lorem massa eu nisl. Nam tellus tellus, mollis in volutpat eget, dignissim ut erat. Integer sed massa sapien. Praesent sem diam, lobortis quis purus eget, elementum interdum erat. Nunc neque ligula, dapibus id dignissim eu, tempor nec lorem. Fusce congue, eros sit amet consequat luctus, nunc elit congue lacus, in malesuada purus justo quis diam. Aliquam laoreet rutrum dolor, nec sagittis risus varius vel.</p>
   <p id="secondp">Voici un paragraphe à droite : Curabitur rutrum consequat justo, ultricies dictum tellus faucibus vitae. Maecenas facilisis molestie lacinia. Vestibulum iaculis sed magna ut iaculis. Vestibulum rutrum augue ut metus auctor, vel ultricies sem tincidunt. Suspendisse erat justo, rutrum at egestas nec, feugiat nec libero. Vivamus ut libero blandit risus luctus malesuada sit amet id lorem. Proin quam eros, blandit at pulvinar nec, placerat ut justo. Quisque arcu enim, pharetra vitae efficitur quis, efficitur et enim. Phasellus consequat lobortis tristique.</p>
   <p id="thirdp">Voici un paragraphe centré : Proin vehicula nunc vestibulum orci tempus condimentum. Fusce ornare urna ac nisi placerat, id porttitor dui vehicula. Phasellus iaculis, libero ut ullamcorper posuere, massa sapien tempus arcu, sed imperdiet sem orci ut risus. Suspendisse porta sit amet dui eget dapibus. Aenean vestibulum purus sed vestibulum consequat. Sed varius justo sit amet est porta, eget maximus dolor ultrices. Nulla pulvinar libero at massa egestas lobortis. Ut ut fermentum diam. Etiam eget viverra nulla, sed vestibulum felis.</p>
   <p id="fourthp">Voici un paragraphe justifié : Sed elementum ut dolor sit amet pulvinar. Sed semper orci sed purus congue, vel ullamcorper sapien interdum. Aenean turpis mauris, faucibus in blandit vel, commodo et metus. Duis euismod, lacus at ornare tincidunt, est purus fermentum metus, quis sodales mi mi eu ipsum. Fusce bibendum dolor et quam ultrices condimentum. Ut viverra odio ut nunc varius pretium. Nam sollicitudin id nibh at condimentum. Aliquam a varius purus. Cras a feugiat est. Donec pulvinar condimentum luctus. Vivamus id risus vitae ante dictum vehicula et ut lectus. Ut ut justo vitae erat dictum fringilla a ut lorem.</p>
</body>

</html>

Et voici le contenu du fichier style.css :

#firstp {
   text-align: left;
}
#secondp {
   text-align: right;
}
#thirdp {
   text-align: center;
}
#fourthp {
   text-align: justify;
}

Voici ce que ça donne sur le document html :

💡 En matière de webdesign (UX/UI) pour améliorer le confort de lisibilité d’une page web, privilégiez l’alignement à gauche. Le centrage n’est pas recommandé, sauf pour des textes très courts et percutants (1 ligne), et la justification peut parfois poser des problèmes de lecture pour des grandes résolutions d’écran.

La typographie

En utilisant les propriétés des polices CSS, nous pouvons modifier la famille de polices, la taille, le style, etc.

Famille de polices

Pour modifier la famille de polices, utilisez la propriété « font-family ».

Les polices  » sans-serif « ,  » Verdana  » et  » Courier  » sont parmi les plus couramment utilisées dans les CSS.

#firstp {
   font-family: sans-serif;
}

#secondp {
   font-family: Verdana;
}

#thirdp {
   font-family: Impact;
}

Supposons que la police que nous avons utilisée ne soit pas prise en charge par le navigateur de vos visiteurs, que faire ?

Il suffit d’ajouter des polices supplémentaires séparées par des virgules si les précédentes ne sont pas prises en charge par le navigateur.

Exemple :

#firstp {
   font-family: xxxx, Impact;
}

xxxx n’étant pas une police, le navigateur ne la prendra pas en charge. La police suivante, Impact, sera attribuée comme valeur de la famille de polices.

Les polices externes

Par défaut, vous n’avez pas beaucoup de choix de typo pour vos pages web. Si vous voulez utiliser d’autres polices, vous pouvez charger des bibliothèques de polices externes.

La plus connue est la bibliothèque proposée librement par Google : https://fonts.google.com/

Pour l’utiliser, rien de plus simple :

  • Rdv sur https://fonts.google.com/
  • Choisissez la typo que vous souhaitez utiliser dans votre document html (par exemple Roboto en Light 300)
  • Copiez le code html généré par l’outil de Google dans l’en-tête de votre page web
  • Vous pouvez maintenant utiliser la font-family Roboto sur tous vos sélecteurs CSS !

Taille de la police

La taille par défaut d’une balise <p> est de 16px (1em). Pour modifier la taille, utilisez la propriété  » font-size « . La valeur peut être en pixels, en em ou en pourcentage.

#firstp {
   font-size: 20px;
}
#secondp {
   font-size: 40px;
}
#thirdp {
   font-size: 30px;
}

Sur votre document html, chaque élément <p> aura une taille de police différente :

Police en gras ou en italique

Pour épaissir la police d’écriture, utilisez la propriété  » font-weight  » avec la valeur “bold” .

#firstp {
   font-weight: bold;
}

Pour la mettre en italique, utilisez “font-style” avec la valeur “italic” :

#secondp {
   font-style: italic;
}

Les apparences “dynamiques”

Enfin, le CSS permet de modifier l’apparence des éléments de manière dynamique : en clair, il est possible de créer des actions en fonction de conditions.

Exemple : modifier l’apparence d’un lien lorsqu’on le survole juste

a:hover {
		color:red;
}

Les différentes conditions utilisables sont les suivantes :

  • :hover : permet de gérer l’affichage de l’élément au survol de la souris (lorsqu’on passe la souris dessus)
  • :active : permet de gérer l’affichage au moment du clic (surtout utilisé pour les liens)
  • :focus : lorsque l’élément est sélectionné (utilisez la touche <tab> pour sélectionner un élément)
  • :visited : lorsque la cible du lien a déjà été visitée (par défaut le lien visité s’affiche en violet foncé, mais vous pouvez imposer une autre couleur)

Pour aller + loin avec la mise en forme de texte :

Le but ici n’est pas de vous fournir une liste exhaustive des différentes propriétés CSS applicables à un texte HTML : si vous voulez avoir un inventaire plus complet (et tester différentes variantes), je vous renvoie à la page “initiation à la mise en forme d’un texte” sur l’excellent site de Mozilla : https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Fundamentals

En résumé

  • Il existe de nombreuses propriétés qui permettent de personnaliser l’allure d’un texte HTML. Par exemple :
    • La propriété color est utilisée pour modifier la couleur du texte.
    • Pour modifier l’arrière-plan du texte, utilisez la propriété background-color.
    • La propriété text-decoration est utilisée pour ajouter ou supprimer des décorations. Elle peut avoir quatre valeurs : souligné, surligné, trait traversant et aucun.
    • La propriété text-align permet d’aligner le texte horizontalement.
    • On peut agir sur la typo en utilisant des propriété font-xxx (”font-size”, “font-color”, “font-family”, etc. – retrouvez la liste des valeurs possibles ici : https://developer.mozilla.org/fr/docs/Web/CSS/font)

Exercice pratique

Pour voir si vous avez bien compris les grands principes de mise en forme, créez un document html, attachez-le à une feuille de styles externe et créez 1 titre <h1>, 3 paragraphes (que vous pouvez copier/coller depuis n’importe quel site ou depuis un générateur de texte en ligne) et des intertitres entre chaque paragraphe.

  • Le premier paragraphe doit utiliser la police arial, helvetica ou sans-serif de taille 15px et être coloré en bleu
  • Le deuxième doit utiliser une police provenant de la bibliothèque Google Fonts, en étant complètement barré et aligné à droite
  • Le troisième doit être centré, coloré en violet
  • Les intertitres 1 et 2 doivent être colorés en marron, le 3ème en rouge.
  • Créez 2 liens qui changent de couleur au survol
  • Supprimez l’effet de soulignement sur les liens
  • Changez la couleur des liens déjà visités

Pour l’instant, c’est simple, n’est-ce pas ? 😉

Prenez une petite pause, on va commencer à entrer dans des concepts un peu plus complexes en voyant quelques notions de structure de page – rien de bien compliqué je vous rassure, mais ça va se corser petit à petit !

→ Bordures, marges et remplissage en CSS