davesite.com / webstation / css

Cascading Style Sheets: An Interactive Tutorial for Beginners

CSS Code Tutorial Chapters:

CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]
Cascading Style Sheets: an Interactive Tutorial

Background and Color

advertisement

One of the interesting things about using CSS is that most things can have a background image, background color, and foreground color. The entire page's properties can be made using a body selector, while you can easily use other selectors such as p or table to define background and color properties.

You are probably familiar with the <body> tag. A typical <body> tag looks something like this:

<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000">

To convert that into CSS, it looks like this:

body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }

Big deal right? But CSS adds some special features. One of the most important is the background-repeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat. A regular web page has a default of background-repeat: repeat, which means the image is repeated both horizontally and vertically. With CSS, you can set the background to repeat horizontally (repeat-x), repeat vertically (repeat-y), or not repeat at all (no-repeat).

We can edit the style mentioned above to have the body's background never repeat by adding background-repeat: no-repeat:

body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000;
background-repeat: no-repeat; }

If you want to include the repeat in your standard background tag (for example, if are not using CSS for the rest of your page), you can add style="background-repeat: no-repeat;", so it looks like this:

<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000" style="background-repeat: no-repeat;">

Remember that although over 90% of web browsers in use today support CSS, there are still some that do not. It may be helpful to use the standard <body> tag to define a text and bgcolor, and then use a style sheet to define everything else, using the same color and background-color values.

If you are using anything but repeat for a background-repeat, you should read the margin chapter of this guide to make sure your background doesn't make your text hard to read.

advertisement

affiliate_link

< Ch. 3 part 3 > Ch. 4 part 2

Copyright © 2002 Dave Kristula. All Rights Reserved.