More often than not, you won’t be using an image to serve as the background for your document elements, and will need your preferred color. CSS supports a number of color values, making it rather easy to cross-apply any palette that you have established during your design phase. While in many cases, the same results can be achieved by using a single-color image, implementing colors as CSS rules makes for a more efficient document, and efficiency is key to a brighter and happier future for all humanity (save, perhaps, color-blind procrastinators.)
#background-color Syntax Formatting
background-color:green; background-color:#00FF00; background-color:rgb(234,234,255);
There are three methods setting the color property in CSS:
You simply give a literal color name, so long as it’s very general and not working out of the rich-kids 72 Big Box of Crayons (w/ built in sharpener). Colors like green and blue will be recognized provided there isn’t a modifier; colors like Periwinkle and Sheep’s Blood will not. This method, while very intuitive, is not recommended, as your color choices are very limited and it leaves the remaining 16 million or so a tad resentful.
You can also provide what is known as the hex number, which is represented by a six-digit hexadecimal number and is comprised of the values 0-9 and the letters A-F. There are roughly 16 million different color values that are supported by most modern devices, and each HEX value represents one of those colors.
Lastly, you may provide the color value as an RGB value, which specifies the intensity of each of those colors, resulting in your color of choice. An RGB value is comprised of 3 numbers, ranging in value from 1 to 255. Just to show you that I’m not making this up, 255x255x255 = 16,581,375, which is the same number of colors you have access to in CSS, and the actual number of licks it takes to get to The Tootsie Roll Centre of a Tootsie Pop. (Now the world does know.)
More often than not, you’ll be able to grab both the RBG and HEX values from your image editing application, but there are also a number pre-compiled values that provide a decent index of colors. We’ve already mentioned Adobe’s Kuler (http://kuler.adobe.com), which allows you to create a great looking palette almost instantly, and it makes it very easy to obtain the proper input values.
#background-color Example
To illustrate the background-color property, go ahead and create a new HTML5 document, and then create the four < div > tags as seen below:
<body> <div id="color1"> </div> <div id="color2"> </div> <div id="color3"> </div> <div id="color4"> </div> </body>
Just a reminder, we have given each < div > element a unique ID so that we may create a specific style rule for that element. We are adding our style definitions in the header of our document, and creating a total of 5 – one for the document body, and 1 for each of our < div > tags:
<style>
body {
background-color:#FFF1AF;
}
#color1 {
width:200px;
height:200px;
background-color:#170F0E;
float:left;
opacity:0.4;
}
#color2 {
width:200px;
height:200px;
background-color:#290418;
float:left;
}
#color3 {
width:200px;
height:200px;
background-color:#505217;
float:left;
}
#color4 {
width:200px;
height:200px;
background-color:#FFD372;
float:left;
}
</style>
In this example, we are setting our color properties in HEX value. Both RBG and HEX will accomplish the same results, however, some prefer using HEX as it’s a shorter value to enter, and can be directly copy and pasted in the correct syntax, which is sometimes not the case with RGB values.
Save out your document, and take a look. You should now have four < div > elements each sporting a fresh new background color, together looking somewhat like a flag for a rouge South American nation state:
The post CSS3 Fundamentals #3 Background Colors appeared first on The Web, Made Easy! | Web Tutorials, Tips, and Articles.