Main?Colors
You can apply the color property to pretty much anything that can accept a color value. You can set the color property to <hr> tags, <font> tags, and just about anything. When setting colors, the value can be a hex color (#990000), a supported name (black), or even an RGB value (100%, 100%, 100% or 100,34,100).
If I wanted all the fonts on my web page to be #990000, but all the links to be blue, then I would set up my CSS like this:
body {
color: #990000;
}
a {
color: blue;
}
Background Colors
You can't set the background colors of your document, and other things like forms just using the color property, however. Instead, you use the background-color property. background-color can accept a color value, or transparent.
Let's say I wanted my background to be #000000, but I wanted all my forms to be transparent (forms consist of the <input> tag, and the <textarea> tag) I would set up my CSS like this:
body {
background-color: #000000;
}
input,textarea {
background-color: transparent;
}
Background Images
With CSS you can set a background image using the background-image property. You set the value to be url(yourimage.gif);
If I had an image that I wanted to tile in the background of all my tables called image.jpg, and an image that I wanted to tile in the background of my entire document called backimage.gif, then I would set my CSS like this:
body {
background-image: url(backimage.gif);
}
table {
background-image: url(image.jpg);
}
Controlling Background Images
Setting the background image with CSS is pretty simple, but you can make a tiling background with HTML, so what's that point? Well, with the background-repeat, background-attachment, and background-position properties you can have complete control over what happens with your image, once it's set in the background.
background-repeat: can be set to repeat, repeat-x, repeat-y, or no-repeat. Repeat is the default, it means that the image will tile. Repeat-x means that the image will only tile horizontally, repeat-y means that it will only repeat vertically, and no-repeat means that the image will only repeat once. Note that repeat-y and x has problems with Netscape 4.
background-attachment: can be set to scroll or fixed. Scroll is default. Fixed means that the image will not move, even while the content is scrolling.
background-position: can be set to a length value, a percentage value, or a set of keywords. The length can be negative or positive. They are usually typed like this: -20px 30px; That value will tell the browser to set the image -20 pixels from the top of the parent, and 30 pixels from the left of the parent. If you set the value to a percentage then it works the same way, only you type it like 20% 40%. The keywords are a lot simpler, they are: left, center, or right for the horizontal alignment, and top, center, or bottom for the vertical alignment. If I wanted the image position to line up to the center horizontally, and to the bottom vertically I would type background-position: center bottom; .
So, let's say I had an image called myimage.gif. I didn't want the image to tile, I didn't want the image to scroll with the text, and I wanted the image to be 80px from the top, and 79px from the right. I could type:
body {
background-image: url(myimage.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 80px 79px;
}
Putting It All Together
That sample CSS above is one method, but there is an easier way to string values all together. I could type the above example like this:
body {
background: url(myimage.gif) no-repeat fixed 80px 79px;
}
That above code break down to this:
body {
background: [background-image] [background-repeat] [background-attachment] [background-position];
}