| | |
In this exercise, you will apply CSS information to individual HTML pages using embedded style sheets. To keep it from being boring, I will show you how to assign background colors and background images to HTML pages using CSS.
Background colors and images are assigned to an entire HTML page by defining the BODY tag in CSS using the background property.
Example:
body { background:#FFCCCC; }
In the above example, I have assigned the background of the BODY tag to be light pink.
Example:
body { background:url(newsletter.gif); }
In the above example, I have assigned the background of the BODY tag to be the URL for the image "newsletter.gif". Instead of using quote marks around the URL, however, I use "url()" around the URL; this is how you mark absolute or relative URLs in style sheet syntax. Note how I have NOT used the "./" relative URL prefix before the call to the graphic; this is to support Internet Explorer 5 for Mac, which has a bug in its relative URL implementation in regards to this CSS feature.
Here is another example:
body { background:url(http://www.michaelmasumoto.com/graphics/bgrdLeaves.gif); }
In the above example, I have set an absolute URL for the background property of the BODY (this absolute URL is to a background tile which I have on my website).
If I want to set both the background color and the background image for a page (so that the background will be some appropriate color while the background image is loading), I can set both values, separated by a space, for the background property in the declaration.
Example:
body { background:#FFCCCC url(newsletter.gif); }
Be warned, however, that Netscape 4 does NOT display the background color while loading the background image when using CSS.
There are two HTML pages and a background graphic which you may download from the links at the bottom of this page. Using an embedded style sheet, apply background color to one HTML page, and the background image to the second HTML page. Add some more tag declarations to each embedded style sheet, defining the H1, H2, H3, P, and B tags; it will quickly become evident to you why using a central linked style sheet is more convenient when working with multiple HTML pages, on the whole, than using embedded style sheets on individual HTML pages.
Make copies of the HTML pages that you've been working on, and remove the embedded style sheets from those copies. Take the external style sheet from Exercise Two ("myStyles.css", which is included in the exercise files for this exercise), and add to it a declaration for the BODY tag which sets the background color and background image. Link that external style sheet to the HTML pages from which you have just removed the embedded style sheets. See how much simpler it is to set style definitions globally in linked style sheets?
Download Exercise Files
Mac Files (.sit -- 15K)
PC Files {.zip -- 14K)
Note: I realize that you may want different background tiles or colors on different HTML pages; in a later section, I will show you how to create something called a CLASS which will handle these sorts of differences from a linked style sheet.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.