Colours


Colour definitions can be assigned to any tag used to format items that can take on a colour: text of any kind, links, the body, tables and table cells.

color

This command refers to the foreground (read: text) colour as opposed to the background colour. Possible values are anything that works in the "body" or "font color" tags, i.e. RGB values such as #FFFFFF as well as standard colour names like red, magenta, blue.

backround-color

While with simple HTML you can assign background colours only to the body and tables/table cells, with style sheets you can do that with text, too. You may have noticed that in this tutorial, samples of code always appear on a grey background, because the tag <tt> has that background color assigned. You can do the same with <H1>, <H2>, <P>, <UL>, <a:link> etc.

However, this feature will make most sense if used for tags that create a block or paragraph, like <blockquote>, <address>, <td>, <th>, especially as Netscape and MSIE display it differently: Netscape displays the background colour only as far as the text goes, MSIE up to the end of the line. For an entire block to be displayed in Netscape, combine backround-color with border-style:none; border-width:thin.

backround-image

At last, we don't have to assign a wallpaper to the whole document or create a table only to be able to use a background image! This works just like background-color, and yes, you can assign a background image to any portion of text you want. This is the code for a "p" tag:
	p { background-image:url(image.jpg) }

background-repeat

If you use the normal background-image definition, the background image will be displayed tiled. By expanding it with background-repeat, you can change that. Possible values are no-repeat, repeat-x (repeat once horizontally) and repeat-y (repeat once vertically). The last one is especially interesting as you can e.g. create a horizontal decoration without using a 1024-pixel-wide (i.e. huge) background image. The image you see running down the left is created that way.


back to formatting text
next chapter: margins and borders


MAIN PAGE | HELP LINKS | FAQ | HOMEPAGE RESOURCES | STYLE SHEETS


This page was prepared by Yoshiwara


This page is hosted by Geocities Get your own Free Home Page
1