|
|||||||||||
|
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 may not because the user style sheet may specifically state a particular color for a particular element.
There are 16 basic colors:
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.
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. If, like most people, you have difficulty with hexadecimal numbers, I suggest you use RichInStyle.com's web-safe colorizer. 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.
To ensure that they do, the red, green and blue components must each be (in hex) 00, 33, 66, 99, CC or FF.
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 typical maximum and minimum is 255 and 0 respectively.
IE 3 does not support colors in either the decimal format (rgb (x, y, z)) or the %.
P {color: red}
BODY {color: #C67}
LI {color: rgb(10%, 45%, 56.7%)}
Specifies the element's foreground color E.g. P {color: red} or P {color:
#C624FF}.
Color is inherited and has an initial value that is browser determined (almost always black).
These are not inherited.
Note that backgrounds 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.
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 background of block elements if they are given a background color that is different from BODY - it does not color in the spaces between words. To avoid this, explicitly set border: none
Specified with background-image: url(name.type), 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.
This states the tiling of the background image.
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.
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.
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.
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.
The next section considers fonts and line heights.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.