Text Colour
CSS can be used to change the colour of text on a webpage.
The color property is used to set the colour of text, including headings, paragraphs and lists.
Using the Color Property
To change the colour of text, use the color property followed by a colour value.
Example
h1 {
color: blue;
}
This CSS rule changes the text colour of every <h1> heading to blue.
- h1 – the selector, which identifies the HTML elements to change
- color – the property, which changes the text colour
- blue – the value, which specifies the colour
Changing Different Text Colours
You can use different CSS rules to give different HTML elements their own colours.
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
CSS Colour Values
The color property can use different types of values to specify a colour. There are three common ways to do this:
- Named colours – use a colour name such as red, blue or green
- RGB values – combine red, green and blue using numbers from 0 to 255
- HEX values – use a six-digit code made up of numbers and letters to represent a colour
For example, all three of these CSS declarations produce the same red text:
color: red; color: rgb(255, 0, 0); color: #FF0000;