MANAGING IMAGES WITH EXTERNAL STYLE SHEETS

CSS File

It is possible to add more than one image to a page using an external style sheet. Do this by:

1. Assign an #ID and associated styles to the image you want to use. (This works also with the .Class and P tags. However, an image would show up in all of your paragraphs. #ID is probably most proper.)
2. Specify height and width the same as the dimensions of the image.
3. Use margins, padding and float to position the image on the page.

Example: Link

#star {background: url(star.gif); height: 23px; width: 23px; color: #ffffff; float: right; margin-right: 75px;}

#mum {background: url(chrysanthemum07.gif); height: 123px; width: 145px; color: #ffffff; float: left; margin-left: 75px;}

p {margin-right: 120px; margin-left: 120px;}

HTML File

To display the image use:

1. <div id="IDname">&nbsp</div> for first image.
2. You need to use some text or a non-breaking space within the container in order for the image to display properly.
3. <div id="anotherIDname">&nbsp</div> for another image.
4. I also used an inline style to position some text next to the images.

Example: Link

<div id="star">&nbsp</div>

<p style="clear: both";>Now is the time for all good men to come to the aid of their country.  Now is the time for all good men to come to the aid of their country.</p>

<div id="mum">&nbsp</div>