Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Color and Backgrounds

Learn about color values and images for backgrounds.


advertisement

olor Values: name, #hex, rgb(R%, G%, B%), rgb(R, G, B)
You have four options for specifying color:

  • As a standard color name

  • As a hexadecimal value

  • As an RGB percentage


  • As a decimal value from 0 to 255

From other HTML work, you are probably familiar with the standard color names and color hex values. You can use any of these as color values with CSS.

Click here to open a new window with a reference chart of the standard names and their hex values.

CSS also offers a new option: RGB values. RGB allows you to describe color as a percentage of red, green, and blue, the three colors that are used to display an image on a monitor.

If all three are set at 100% you'll get pure white. If all three are set at 0% you'll get pure black. If any one is set to 100% and the others to 0%, you'll get a pure red, green, or blue. Varying percentages in between give you different hues.

You specify RGB values by typing the letters rgb, an open parenthesis, the three percentages, and a close parenthesis, like this:


	{color: rgb(0%, 10%, 60%)}

You can also specify RGB values as a decimal number. If you are working with a program like PhotoShop, you are probably already familiar with these values; it is one of the ways PhotoShop describe color. To use a decimal number value, type the letters rgb, an open parenthesis, the three numbers separated with a comma, and a close parenthesis, like this:


	{color: rgb(255, 0, 0}

Color: {color: name/#hex/rgb(R%, G%, B%)/rgb(R, G, B)}
The color property selects a foreground color. Typically, the foreground color is the color of the text in the HTML element.

Example: This creates colored text for the paragraph element.


	P {color: green}

If you are using a CSS-enabled browser, this paragraph appears in green, with a named value of green.


	P {color: #9966cc}

If you are using a CSS-enabled browser, this paragraph appears in purple, with a hex value of 9966cc.


	P {color: rgb(70%, 0%, 30%)}

If you are using a CSS-enabled browser, this paragraph appears as 70% red, 0% green, and 30% blue.


	P {color: rgb(170, 0, 100)}

If you are using a CSS-enabled browser, this paragraph appears as 170 red, 0 green, and 100 blue.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date