CSS 2.0 Properties - Color

CSS2 Properties - Color

Introduction

Two of the most important things in web design are color and backgrounds. It is hardly surprising therefore that CSS provides every possible means of changing them.

It should be noted that because of user and browser style sheets, if a background property or foreground color is specified, the corresponding foreground/background color must be explicitly stated - even if you assume that the values will inherit, they might not because the user style sheet may specifically state a particular color for a particular element.

Colors

There are 16 basic colors:

• Aqua
• Black
• Blue
• Fuchsia
• Gray
• Green
• Lime
• Maroon
• Navy
• Olive
• Purple
• Red
• Silver
• Teal
• White
• Yellow

Colors can also be specified as a hexadecimal number (hexadecimal (base-16) is similar to decimal, except instead of counting 8, 9, 10, it counts 8, 9, A, B, C, D, E, F, 10 (=16 decimal)):

#1CDBFA

The first two digits refer to the red component, the second two to the green, and the third to the blue. The maximum and minimum for each is FF and 00 respectively.

This can also be specified as a three digit hexadecimal number:

#C67

This is equivalent to #CC6677 (i.e., each digit is repeated to 'finish' the number).

Since different operating systems display colors in different ways, it is preferable to use web-safe colors. Web-safe colors are those that have as red, green and blue components only (in hex) 00, 33, 66, 99, CC or FF. This allows you to select one of 216 colors from a grid. Clicking on a color changes the background color of the page to that color, and you can then see what each of the 216 colors look like as a foreground so that you can easily get an attractive color scheme.

Alternatively, colors can be specified in this form: rgb (x%, y%, z%) (e.g. rgb (30%, 40%, 20%), or as a decimal number: rgb (x, y, z) (e.g. rgb (168, 57, 32)), where the maximum and minimum on most computers is 255 and 0 respectively.

IE 3 does not support colors in either the decimal format (rgb (x, y, z)) or the %.

User interface based colors

User interface based colorsIn order to make pages that conform to the operating environment that your users are used to, it is possible to declare all color values as one of the following (note that CSS is case-insensitive so the mixed caps are cosmetic only):

1. ActiveBorder = active window border
2. ActiveCaption = active window caption
3. AppWorkspace = Background color of a multi-document interface
4. Background = Desktop background color
5. ButtonFace - button background color
6. ButtonHighlight - highlight background color
7. ButtonShadow - shadow background color
8. ButtonText - button text color
9. CaptionText - text in caption, size box, and scrollbar arrow box.
10. GrayText - color of grayed out (disabled) items
11. Highlight - selected item in a control background color
12. HighlightText - highlighted text color
13. InactiveBorder - inactive window border
14. InactiveCaption - inactive window caption
15. InactiveCaptionText
16. InfoBackground - background color of popup help on icons
17. Menu - Menu background
18. MenuText
19. Scrollbar - the area in which the scroller is dragged
20. ThreeDDarkShadow - dark shadow of 3d display elements
21. ThreeDFace
22. ThreeDHighlight
23. ThreeDLightShadow
24. Window = window background
25. WindowFrame
26. WindowText

Examples

P {color: windowtext}
BODY {color: #C67}
LI {color: rgb(10%, 45%, 56.7%)}

Properties

Color

The 'color' property specifies the color of text in an element. For example, P {color: red} or P {color: #C624FF} would make all P elements (such as this one) red or purple respectively.

Color is inherited so if you specify that BODY should be red, everything inside BODY (such as this text) will also be red unless otherwise stated on the descendant elements. Color has an initial value that is browser determined (almost always black).

Background properties

These are not inherited.

Backgrounds fill the area behind the text when specified on inline elements such as B, whereas on block elements they color the whole of the background of the block.

Note that although backgrounds color padding, they do not color in margins, except on BODY/HTML.

IE 3 does not support background properties on linked style sheets on BODY, HTML and TABLE. This might make pages difficult or impossible to read. Therefore, I would recommend that you declare backgrounds using the BODY tag in the HTML (e.g., <BODY bgcolor="black">). Style sheets override HTML attributes, so you are not constrained by BODY.

In addition, it does not support the individual background properties, only the 'background' shorthand.

Background-color

This can be set to a color or transparent (initial value, meaning that the parent element's background-color shines through). E.g., P {background-color: transparent}

Netscape 4.* does not color in the whole of the background of block elements if they are given a background color that is different from BODY - it only colors the space behind the text. To avoid this, explicitly set border: none.

Background-image

Specified with background-image: url(NameOfFile), e.g. BODY {background-image: url(back.jpg)}. The other value is none, which is the initial value. E.g., background-image: none.

Background images are rendered on top of background colors.

Background-repeat

This states the tiling of the background image - normally backgrounds cover the whole of the element but using background-repeat you can alter this.

Possible values are repeat (tile the image left, right, up and down - initial value), repeat-x (tile the image left and right), repeat-y (tile the image up and down) or no-repeat (only draw the image once). For example, background-repeat: repeat-x.

IE only draws repeat-x to the right, and repeat-y down, not left and right and up and down as it should do.

Background-attachment

This can be specified as one of scroll (initial) or fixed. Scroll means that the background moves with scrolling, but fixed that it stays in the same place regardless of scrolling.

E.g., BODY {background-attachment: fixed}.

Background-position

This states the initial position of the background image. E.g., BODY {background-position: 12cm 100%}, where the lengths refer to the offset of the top left hand corner of the image from the element's padding's top left corner (the first distance is horizontal, the second vertical).

55% 67% means that the point 55% across and 67% down the image is placed 55% across and 67% down from the element's padding's top left corner. If only one percentage or distance is supplied, it refers to the horizontal value, with the vertical position set to 50%.

Lengths should be avoided because they vary on different resolution screens. The initial value is 0% 0%. Negative values are permitted.

Note in particular that changing the background position does not mean that it will not still fill the element - a background position of 90% 90% will fill the background as much as one of 0% 0% - the only difference will be that different parts of the background will be in different bits of the screen.

Alternatively, one or two keywords can be specified, being top (0%), center (50%), or bottom (100%) for the vertical position, and left (0%), center (50%) and right (100%) for the horizontal position - e.g., background-position: top center. As before, if you omit one, the other is set to center (=50%). Note as well that these keywords cannot be combined with lengths or %.

Note that background-position only applies to replaced and block elements.

Background

This allows one or more of the above properties to be specified in the order color, image, repeat, attachment, position. E.g., BODY {background: red url(back.gif) 10% 10% repeat-y}.

Because the background property is supported by more browsers than the longhand properties, you should use it instead. However, since Netscape defaults to black if you use the background property, you should always specify a background color when you use this property.