Working with Color and Images Using CSS

Color is one area where CSS has long been our friend. Because color is determined by a combination of the computer's hardware capabilities, the operating system, and the browser, we've been able to use CSS to color backgrounds and text since relatively early in the life of style sheets. Here you'll learn to apply color to page backgrounds and element backgrounds, and even spice up tables with color.

Color options in CSS are more numerous than what was available to us in HTML. In CSS, you can choose among hexadecimal color, hexadecimal shorthand color, RGB color, color percentages, and the 17 color names supported by CSS 2.1.

CSS provides terrific control for images, too. In fact, the capability to place images into the background of any element is helping today's web designers create beautiful designs free of the constraints of tables. In this tutorial, you'll learn how to apply images to backgrounds and elements, and you'll learn about methods of using images for a range of visual techniques.

Image options are numerous in CSS. You can control the way images tile (or don't tile), fix them to a location within an element's background, scroll the image or fix the image so text scrolls over itlots of choices. You'll get to try out all these techniques and really get a feel for how CSS not only enables you to use images in ways never available in HTML, but does so with a range of control you'll really appreciate.

So far, you've been focusing on structuring your content with HTML, adding images and media, and working with tables, frames, and forms. Everything you've done so far has been about creating the canvas. Now you'll get a chance to splash some color and life onto that canvas, making your seemingly bland documents come to life.