There are 16,777,216 millions of colors available for us to choose from when we working with CSS. CSS work with RGB (red/green/blue) standard and accept color values in hex code.
The three standard values in the RBG are from 0 to 255, 0 being the lowest level, 255 being the highest level (for example full red). These values can also be a percentage.
Hexadecimal is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.).
The three-digit version is often easier to understand (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.
For example:
red
Is the same as rgb(255,0,0)
Which is the same as rgb(100%,0%,0%)
Which is the same as #ff0000
Which is the same as #f00
CSS Color Definiation
CSS has defined seventeen valid predefined color names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white,yellow and transparent which is also a valid value.
Colors can be applied by using color and background-color
A blue background and yellow text could look like this:
h1 {
color: yellow;
background-color: blue;
}
These colors might be a little too harsh, so you could change the code of your CSS file for slightly different
shades:
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1 element) have changed to yellow and blue.
You can apply the color and background-color properties to most HTML elements, including body, which will change the colors of the page and everything in it. I hope this article has given you a the basic of CSS coloring format and on my next article we will go into more detail by looking at how CSS format Text element.
Stay tune…
Tags: CSS Color Element