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.
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.
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.
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) }
|
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
