Adding colors with CSS

Color is what gives life to anything. Television has never been this interesting when it was still black and white. Same thing with websites. Most websites that do not have colors and backgrounds look dull, which leads the visitors away.

This lesson will teach you how to apply colors and background colors to your website.

CSS Color property

Color property is what describes the foreground color of an element. To give you a clearer idea, I will provide you with an example. Say, you want to change the font color of your header to blue. Whnnat you do is you apply the color property. You already know that the tag for header is You then make a code to set the color of the foreground. This is the code to use:

You can enter color values in three different ways.

• You can choose to use hexadecimal values such as the one used in the above example;
• you can use common English color names;

• you can opt to choose “rgb-values”. RGB is short for Red, Green, Blue. It is the color language of computers.

CSS Background color

Background color property is what describes the background color of elements.

To change the background color of the entire page of your HTML document, the background color property must be placed within the element, as this element contains all that is in your HTML document. This can also be applied to several other elements such as texts and headers.


As you see, you can change the background color of any element on your site - be it just text or entire text blocks: