bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Text Color

Concept visual

CSS Text Color

Graph traversalgraph
ABCDE
current
queued
1
4

Start from A

CSS Text Formatting

CSS has a lot of properties for styling and formatting text. 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.

CSS Text Color

The color property is used to set the color of the text.

The color is specified by:

Formula

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at

CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector.

Example body {
color: blue;
}
h1 {
color: green;
}
h2 {
color: red;
}

Text Color and Background Color

Formula

In this example, we define both the background - color property and the color property:
Example body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}

Important:

High contrast is very important for people with vision problems. So, always ensure that the contrast between the text color and the background color (or background image) is good!

The CSS Text Color Property

Property

Description color

Specifies the color of text

Previous

CSS Outline Shorthand

Next

CSS Text Alignment