You can set the foreground and background colour of any element using CSS, from body to block elements to inline elements. On this page we will talk about foreground colour first and then background colour. Other types of backgrounds have their own page.
Normally foreground is considered the text of the element, although it actually includes the borders around the element. If you have worked with HTML you may be familiar with the element font and its attribute color. With CSS the element font is ignored or assumed when we use the attribute color. Color can take any of the values discussed further down this page. Color is inherited. Foreground colour is applied to the element border by default. Foreground colour is black by default.
Normally foreground is considered the text of the element, although it actually includes the borders around the element. If you have worked with HTML you may be familiar with the element font and its attribute color.
Color can take any of the values discussed further down this page.
Color is inherited.
Foreground colour is applied to the element border by default. Of course you can easily change the border colour using border-color and its variants. And the border has to be turned on, there has to be a border-style before the border is visible, no matter what color is set to.
The attribute color is spelled without a "u", which takes a little getting used to for many of us.
Background colour is much the same as foreground colour. The attribute is different: background-color. Background colour is not inherited. And background colour is transparent by default.
Background colour is much the same as foreground colour. The attribute is different: background-color. Background colour is not inherited. And background colour is transparent by default.
Combining foreground colour and background colour can make for some very nice effects. Designers must be careful to have a reasonable level of contrast between text and background so the text is readable. And designers must always keep in mind browsers can be set to ignore style sheet colours and substitute colours the viewer thinks are appropriate.
There are a variety of schemes available for selecting colour. Some give more consistent results with various browsers than others.
There are sixteen colour names that are defined in HTML 4.01, CSS recognizes these sixteen plus orange for a total of seventeen. Many browsers recognize up to 140 colour names, including the standard seventeen. Using colour names gives somewhat unpredictable results.
RGB: Red, Green, Blue: the colours used by monitors to build images on the screen. The amount of each of these three primary colours can be controlled using either percentages or integers. Percentages between 0% - 100% can be used. Anything over 100% will be converted to 100%. Any decimal portion may or may not be rounded or ignored, depending on the browser. Integers range between 0 - 255. The basic syntax is: rgb(nn,nn,nn) where nn is either a percent or an integer. For example white can be specified using either rgb(100%,100%,100%) or rgb(255,255,255) and black by rgb(0%,0%,0%) or rgb(0,0,0). The letters indicate the order of the numbers. The first integer or percent indicates the amount of red, the second the amount of green, and the third the amount of blue. Using color as a declaration with a selector follows the usual syntax. For example: h1 {color: rgb(0,0,0);} sets the colour (of the text) of h1 to black.
Image editing applications have long used hexadecimal colour codes. They are just another way to code for the amount of each of the primary colours, Red, Green, Blue present in a particular part of the screen. Hexadecimal codes always start with the number sign, #, and are either six or three characters. (Since hexadecimal numbers range from 0 - F it is necessary to say "characters" and not "numbers".) If only three hexadecimal characters are present as a colour code, the browser assumes each character represents an identical pair of characters. The syntax is color:#nnnnnn or color:#nnn where n is any hexadecimal character, #abc is equivalent to #aabbcc. White is generated with 100% of each of the three primary colours: #ffffff and black by the absence of all three: #000000.
| Colour | Percent | Integer | Hexadecimal |
| red | rgb(100%,0%,0%) | rgb(255,0,0) | #ff0000, #f00 |
| orange | rgb(100%,40%,0%) | rgb(255,102,0) | #ff6600, #f60 |
| yellow | rgb(100%,100%,0%) | rgb(255,255,0) | #ffff00, #ff0 |
| green | rgb(0%,100%,0%) | rgb(0,255,0) | #00ff00, #0f0 |
| blue | rgb(0%,0%,100%) | rgb(0,0,255) | #0000ff, #00f |
| aqua | rgb(0%,100%,100%) | rgb(0,255,255) | #00ffff, #0ff |
| gray | rgb(50%,50%,50%) | rgb(128,128,128) | #808080 |
| maroon | rgb(50%,0%,0%) | rgb(128,0,0) | #800000 |
| navy | rgb(0%,0%,50%) | rgb(0,0,128) | #000080 |
| purple | rgb(50%,0%,50%) | rgb(128,0,128) | #800080 |
| silver | rgb(75%,75%,75%) | rgb(192,192,192) | #c0c0c0 |
| black | rgb(0%,0%,0%) | rgb(0,0,0) | #000000, #000 |
| white | rgb(100%,100%,100%) | rgb(255,255,255) | #ffffff, #fff |
The short hexadecimal colour code (3 characters) can only be used if the six character code has identical pairs for each of the three colours.
Web-safe colours are colours that browsers will generate without dithering. That means the colour you see on your screen will be the same as the colour on the screen of anyone else who views your html page (usually, there are other factors involved besides dithering. They have to do with the characteristics of the monitor and are not under your control). Web safe colour codes are multiples of either 20% or 51 or #33. Colours coded using the following will generate web-safe colours.
Remember that each colour is coded independantly. So rgb(20%, 40%, 60%) and #336699 are safe colours, rgb(18%,100%,74%) and #8090a0 are not.