Color and Background Color
Colors for both color and background color do come in many forms, there are color names (ex. red), hex triplet colors (ex. #FF0000), RGB colors (ex. 255,0,0), RGBA colors (ex. 255,0,0,1), HSL colors (ex. 0° 100% 50%) and HSLA colors (ex. 0° 100% 50% 100% 100%). If you want to know more, see a good description and overview on http://en.wikipedia.org/wiki/CSS_colors and http://www.w3schools.com/html/html_colornames.asp.
Examples for color:
color: red;
color: #ff0000;
color: rgb( 255, 0, 0);
color: rgba( 255, 0, 0, 1);
color: hsl( 0, 100%, 50%);
color: hsla( 0, 100%, 50%, 1);background-color: red:
background-color: #ff0000;
background-color: rgb( 255, 0, 0);
background-color: rgba( 255, 0, 0, 1);
background-color: hsl( 0, 100%, 50%);
background-color: hsla( 0, 100%, 50%, 1); background: red;
background: #ff0000;
background: rgb( 255, 0, 0);
background: rgba( 255, 0, 0, 1);
background: hsl( 0, 100%, 50%);
background: hsla( 0, 100%, 50%, 0.8);This last version gives you the possibility to define multiple background properties in one line. Example:
background: red url("picture/background.png" ) no-repeat;HSL, HSLA and RGBA are not supported by all browsers, see Can I use CSS3 Colors? on www.caniuse.com. If you don't use it in JavaScript, you don't need to test for support, just do the following:
background: #ff0000;
background: hsla( 0, 100%, 50%, 0.6);
background-color: #ff0000;
background-color: hsla( 0, 100%, 50%, 0.6);
color: #0000ff;
color: hsla( 240, 100%, 50%, 0.4);You can see the instruction video at youtube by clicking on this text here. To see how it works: Play around!