Changing Background color using CSS

Using CSS we can design our page, according to our requirements. We can change the background color or we can add some image to our background (see in the next post).
We can change the background color to whatever color we want. To do so, we must know the color name, the RGB Value of the color, the RGBA Value or HEX Value of the color, the HSL Value or the HSLA Value. We will be discussing some basics only.

Color Name

To change the background color of the whole page using color name, add the color property into the body selector like this,
We can specify any of the logical color name as the value e.g., red, yellow, green etc. 

The HEX Value

 In this pattern we specify three different value for three different colors red, green and blue followed by a # sign like this: #ff0000 (it's red). 
Code snippet is given below:

RGB Value

The RGB stands for Red, Green, Blue. As above, we mention three values for three different color in () sign followed by rgb like this: rgb (255,0,0)  /* Red */
The code snippet is given below: 

RGBA Value

RGBA value is as same as the RGB value, but with some opacity. A is an alpha parameter which specifies the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
An rgba value is specified by: rgba(red,green,blue,alpha).  e.g., 

These are some of the basic values, used by most of the programmers. 
Download the Example File.
To read more about the Legal CSS color values, visit:

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

Post a Comment

Suggestions will be greeted.


Copyright © CSS3 (Web Designing) | Designed By Code Nirvana