Stylisation de texte CSS

Introduction

Bienvenue dans le laboratoire de stylisation de texte CSS ! Dans la conception web, le contrôle de l'apparence du texte est fondamental pour créer des sites web lisibles, accessibles et esthétiquement agréables. CSS (Cascading Style Sheets) fournit un ensemble puissant de propriétés spécifiquement à cet effet.

Dans ce laboratoire, vous acquerrez une expérience pratique avec les propriétés CSS les plus courantes pour la stylisation de texte. Vous apprendrez à modifier la couleur du texte, à ajuster la taille de la police, à mettre le texte en gras, à l'aligner et à contrôler l'espacement entre les lignes. Nous travaillerons avec deux fichiers : index.html, qui contient le contenu, et style.css, où vous écrirez vos règles CSS. Vous pourrez voir vos modifications en temps réel en passant à l'onglet Web 8080 dans l'environnement du laboratoire.

Commençons !

Définir la propriété color pour la couleur du texte

Dans cette étape, vous apprendrez à modifier la couleur du texte à l'aide de la propriété CSS color. Cette propriété peut accepter des noms de couleur (comme red, blue), des valeurs hexadécimales (comme #FF0000), des valeurs RGB, et plus encore.

Tout d'abord, localisez le fichier style.css dans l'explorateur de fichiers sur le côté gauche du WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutons une règle pour modifier la couleur du texte du paragraphe. Nous utiliserons un sélecteur p pour cibler tous les éléments de paragraphe. Ajoutez le code suivant à votre fichier style.css :

p {
  color: #2980b9;
}

Après avoir ajouté le code, enregistrez le fichier style.css. Pour voir le résultat, cliquez sur l'onglet Web 8080 en haut de l'interface. Vous devriez constater que la couleur du texte du paragraphe a changé pour une nuance de bleu.

Appliquer la propriété font-size en pixels

Dans cette étape, nous allons ajuster la taille de notre texte à l'aide de la propriété font-size. Cette propriété contrôle la taille de la police. Bien qu'il existe de nombreuses unités que vous pouvez utiliser (comme em, rem, %), nous commencerons par les pixels (px), qui fournissent une taille fixe.

Rendons le texte du paragraphe légèrement plus grand pour une meilleure lisibilité. Retournez à votre fichier style.css et ajoutez la propriété font-size à la règle p existante.

La règle de votre sélecteur p devrait maintenant ressembler à ceci :

p {
  color: #2980b9;
  font-size: 18px;
}

Enregistrez le fichier et basculez à nouveau vers l'onglet Web 8080. Vous remarquerez que le texte à l'intérieur du paragraphe est maintenant plus grand qu'auparavant.

Utiliser la propriété font-weight pour le texte en gras

Dans cette étape, vous apprendrez à contrôler l'épaisseur du texte à l'aide de la propriété font-weight. Cette propriété peut accepter des valeurs de mots-clés comme normal ou bold, ou des valeurs numériques de 100 à 900.

Faisons ressortir davantage le titre (h1) en définissant explicitement son épaisseur. Bien que les titres soient souvent en gras par défaut, leur définition dans votre CSS assure la cohérence. Nous allons également mettre le texte du paragraphe en gras.

Modifiez votre fichier style.css. Tout d'abord, ajoutez une nouvelle règle pour l'élément h1. Ensuite, ajoutez la propriété font-weight à votre règle p existante.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

Enregistrez le fichier et vérifiez l'onglet Web 8080. Vous verrez que le texte du paragraphe est maintenant en gras.

Implémenter la propriété text-align pour centrer

Dans cette étape, nous utiliserons la propriété text-align pour contrôler l'alignement horizontal du texte. Cette propriété peut avoir des valeurs telles que left, right, center ou justify. C'est un excellent moyen de positionner les titres et autres éléments de texte de niveau bloc.

Centrons le titre principal de notre page. Pour ce faire, nous ajouterons la propriété text-align à notre règle h1 dans style.css.

Mettez à jour la règle h1 dans votre fichier style.css pour inclure text-align: center; :

h1 {
  font-weight: bold;
  text-align: center;
}

Après avoir enregistré le fichier, actualisez l'onglet Web 8080. Le titre <h1>, "Welcome to CSS Text Styling", devrait maintenant être parfaitement centré en haut de la page.

Ajouter la propriété line-height pour l'espacement

Dans notre dernière étape, nous améliorerons la lisibilité de notre paragraphe en ajustant l'espace entre les lignes de texte. Ceci est fait avec la propriété line-height.

L'utilisation d'une valeur sans unité pour line-height est une bonne pratique courante, car elle crée un espacement relatif à la taille de la police de l'élément. Par exemple, un line-height de 1.6 signifie que l'espacement sera 1,6 fois la taille de la police.

Ajoutons un espacement vertical à notre paragraphe. Allez dans votre fichier style.css et ajoutez la propriété line-height à la règle p.

Votre règle p finale devrait ressembler à ceci :

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

Enregistrez le fichier et visualisez le résultat dans l'onglet Web 8080. Vous remarquerez que le paragraphe est maintenant beaucoup plus facile à lire, avec un espacement plus confortable entre les lignes.

Résumé

Félicitations pour avoir terminé le laboratoire de stylisation de texte CSS ! Vous avez appris et appliqué avec succès certaines des propriétés CSS les plus essentielles pour contrôler l'apparence du texte sur une page web.

Dans ce laboratoire, vous avez pratiqué :

• color : Pour changer la couleur du texte.
• font-size : Pour contrôler la taille du texte.
• font-weight : Pour ajuster la graisse (l'épaisseur) du texte.
• text-align : Pour définir l'alignement horizontal du texte.
• line-height : Pour gérer l'espacement vertical entre les lignes de texte.

Ces compétences fondamentales sont les éléments de base pour créer un contenu web bien conçu et lisible. N'hésitez pas à expérimenter davantage avec différentes valeurs et propriétés dans le fichier style.css. Continuez à explorer pour devenir plus compétent en CSS !