Skip to main content

CSS Text Color

Text Color​

The color property is used to set the color of the text. The color is specified by:

  • a color name, for example "red"
  • a HEX value, for example"#ff0000"
  • an RGB value, for example "rgb(255,0,0)"

The default text color for a page is defined in the body selector

body {  
    color:  blue;  
}  
  
h1 {  
    color:  green;  
}

Full example:

<!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>

Example Text Color

note

For W3C compliant CSS: If you define the color property, you must also define the background-color.

Example: Text Color and Background Color​

In this example, we define both the background-color property and the color property:

body {  
    background-color:  lightgrey;  
    color:  blue;  
}  
  
h1 {  
    background-color:  black;  
    color:  white;  
}  
  
div {  
    background-color:  blue;  
    color:  white;  
}

Table of Contents