TechWhirl (TECHWR-L) is a resource for technical writing and technical communications professionals of all experience levels and in all industries to share their experiences and acquire information.
For two decades, technical communicators have turned to TechWhirl to ask and answer questions about the always-changing world of technical communications, such as tools, skills, career paths, methodologies, and emerging industries. The TechWhirl Archives and magazine, created for, by and about technical writers, offer a wealth of knowledge to everyone with an interest in any aspect of technical communications.
At 07:52 PM 7/16/98 -0700, Richard asked:
>Can someone please explain to me how to use cascading style sheets to
>set the background color of a page?
Your best bet would probably be to embed
the style sheet in the <HEAD> of the HTML
document. (You have other options for
connecting the style sheet to the HMTL
document, but embedding is a good choice
for simpler applications.)
For example, if you want to have a blue
background, your code might look
like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<HTML>
<HEAD>
<TITLE>Hairy Spiders</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: #0000FF}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
...
Note that
* You should use the Comment tag to hide the style
sheet from older browsers that don't support them.
* You should use the BGCOLOR= attribute in the
<BODY> tag to accommodate older browsers.
* You can use either the RRGGBB number or the
color name (such as BLUE, RED, etc.) in the style
sheet.
You could also insert an image instead of a color,
like this:
BODY {background: url(filename.gif) repeat-y}
This code will tile an image vertically down
the page. (Use repeat-x for horizontal tiling,
or neither repeat-x nor repeat-y for regular
tiling.)
Or, you could specify both an image and a background
color that shows up where the image doesn't,
like this:
BODY {background: #0000FF url(filename.gif) repeat-y}
Finally, be aware that style sheet support is
*very* flaky, so be sure to test all style sheets
thoroughly. For example, the "official" code for
applying these sample backgrounds is
"background-color" and "background-image," but I'll
be darned if I could get that code to work consistently.
The shortened version shown here works fine....
Hope this helps!
Deborah
**************************************************************
* Deborah S. Ray, debray -at- raycomm -dot- com, http://www.raycomm.com/
* co-author _Mastering HTML 4.0_, _HTML 4 for Dummies Quick
Reference_, _The AltaVista Search Revolution_, and others.
* RayComm, Inc., currently accepting contract inquiries.
