Changing colors with CSS

Go back to HTML and CSS Index

In this lesson, we will look at different ways to change the colors of the HTML elements on the page.

The color property

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

There are 4 "types" of color values, you can use:

  • HTML5 colors
  • HEX
  • RGB
  • HSL

HTML5 colors

There are about 140 HTML5 colors that all modern browsers support. To use an HTML5 color, you set the value of the color property to the name of the color:

p {
color: red;
}
Example 3.20 | using the color attribute with an HTML5 color value

You can find a list of the HTML5 colors on w3schools.

HEX colors

Hexadecimal color values are supported in all browsers.

The integers specify the intensity of the colors - with 00 as the lowest value and FF as the highest. The first two integers specify the intensity of the color red, the second two of the color green, and the last two of the color blue.

p {
color: #FF0000;
}
Example 3.21 | using the color attribute with an HEX color value

Notice that hexadecimal color value are initiated with the # symbol.

In the example above, the paragraph will turn red.

RGB colors

RGB is an abbreviation for Red Green Blue. An RGB color is specified with rgb(red, green, blue).

The parameters - separated by commas - define the intensity of the color as an integer between 0 (lowest intensity) and 255 (highest intensity).

p {
color: rgb(255, 0, 0);
}
Example 3.22 | using the color attribute with a RGB color value

In the example above, the paragraph will turn red.

HSL colors

HSL is an abbreviation for Hue, Saturation and Lightness.

Personally, I've never seen HSL color values in use which is probably due to the fact that HSL colors are not supported by all browsers.

p {
color: hsl(0, 100%, 50%);
}
Example 3.23 | Using the color attribute with an HSL color value

In the example above, the paragraph will turn red.

I don't recommend using HSL color values - you can always find the HEX or RGB color value of the color using a color converter and thereby making sure that the colors, you use, will be displayed correctly in all browsers.

Question

In the examples above, we change the color of text marked up as paragraph text. How do we change the color of text marked up as primary heading (h1)?

The background-color property

To change the background color of HTML elements, we use the background-color property.

p {
background-color: black;
}
Example 3.24 | Changing the background color of all paragraphs

The value of the background-color property can be either HTML5, HEX, RGB or HSL.

Assignment

Change the background color of all headings to something other than white.

Next up

In the next lesson, we will look at how to change the font.

Next up: Changing the font