Style Sheets - Color/Backgrounds

What's a Web site without a dash of color? Boring. That's why this section is important. Here you learn about the following properties: color, background-color and background-image. Let's start with the obvious, color.

The color property can work on many objects including: text, the body and links (we'll cover this in the review section). To specify a color, you have several different options: rgb (for you Photoshop users), hexidecimal code (for HTML veterans who don't use rgb), and text color names (for most people). The following table is a listing of some colors you might want to use. Note: For the below colors, you can use their text names, but I'd be skeptical about using other color names, some browsers won't support them.

Here's some examples of the code you could use:

p { color: black }
h2.red { color: rgb(255,0,0) }
.red { color: #FF0000 }

Next up, background-color! With background-color, you can set the background area of tables (even individual cells), behind text and behind links (this will be covered in the review lesson). All of the same values that you used for color you can use for background-color.

p { background-color: black }
h2.red { background-color: rgb(255,0,0) }
.red { background-color: #FF0000 }

Similar to background-color is background-image. You can use background-image on all the same objects as background-color, you only have to change the value. Take a look:

body { background-image: url(images/background.gif) }
.image { background-image: url(images/background.gif) }

"background.gif" is an actual image, you can use it to test your style sheet skills in the below practice area. Try it out!

Practice

You now have covered all the basic style sheet techniques, so let's Review (with link effects)!

Introduction | Fonts | Color/Backgrounds | Review and Link Effects