CSS possède de nombreuses propriétés pour formater le texte.
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>
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.
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>
Dans cet exemple, nous définissons à la fois la propriété background-color
et la propriété color
:
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 !
Spécifie la couleur du texte