Skip to content
Tutorial Reference

CSS Text Color

How to use the CSS color property with color names, HEX values, or RGB to style text, including examples for body, headings, and elements while ensuring W3C compliance.

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

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;  
}
Navigation