Texte CSS


Table des matières

    Afficher la table des matières


CSS possède de nombreuses propriétés pour formater le texte.


text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.


Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>



Couleur du texte

La propriété color est utilisée pour définir la couleur du texte. La couleur est spécifiée par :

  • un nom de couleur - comme "rouge"

  • une valeur HEX - comme "#ff0000"

  • une valeur RVB - comme "rgb(255,0,0)"

Consultez les valeurs de couleur CSS pour une liste complète des valeurs de couleur possibles.

La couleur du texte par défaut d'une page est définie dans le sélecteur de corps.

Exemple

body {
  color: blue;
}

h1 {
  color: green;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>



Couleur du texte et couleur d'arrière-plan

Dans cet exemple, nous définissons à la fois la propriété background-color et la propriété color :

Exemple

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

  div {
  background-color: blue;
  color: white;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>


Important : Un contraste élevé est très important pour les personnes problèmes de vue. Alors, assurez-vous toujours que le contraste entre la couleur du texte et la couleur de fond (ou image de fond) c'est bien !


La propriété CSS Text Color

color

Spécifie la couleur du texte