Create a folder in your Exercises Folder on your harddrive. Name it firstname.lastname.CSS. You will put all files from this section in that folder. Do not turn in your folder to the server until you have completed all exercises(except the optional extra credit).

Exercise Local Styles- In this exercise you are going to apply some styles locally. You will add them to existing tags. If you need help, look at page 223.

  1. Go View...Source for this document. Select all and copy it. Open up Wordpad and paste the code into Wordpad. Save your Wordpad document into your CSS folder as firstname.lastname.htm. Right mouse click each image on this page and save them into your CSS folder. Now go File...Open and open up the firstname.lastname.htm document in your CSS folder in Internet Explorer.
  2. Put a two line blue border around the image at the top of this page(the title image).
  3. Using Absolute Positioning, make the title image appear 50 pixels from the upper left hand corner of the browser window and 50 pixels down from the upper left hand corner.

Exercise Internal Style Sheet- You are going to use this same html document, but now create an internal style sheet in the <head> portion of this document. Using an internal style sheet:

  1. Make the paragraph starting If you open up ... line up in the center with a left margin of 150 pixels and a right margin of 150 pixels. Make this paragraph italic(using styles!) and have a smaller line height.
  2. Use the gray image to the right and make it the background for the paragraph that starts If you open up a page done with Cascading Style Sheets .... Also, change the font color of that paragraph to red(using styles)
  3. Using styles, make the scrollbar of this exercise colored. Use as many scrollbar properties as you wish to make it pretty.

Exercise External Style Sheet- Open up a new Wordpad document and save it as mystyles.css into your Exercise CSS folder. Using an external style sheet:

  1. Put a yellow background around the paragraph above that starts Exercise Local Styles- In this...
  2. Remove underlining from all links(visited and normal) and make them change color to lime(yuk!) when you hover over them. Here is a fake link so you can see if it works.
  3. And just to beat a dead horse, use the little rhollhead(right) as an icon to replace the numbers in this list(this list only, not all lists on this page).

Exercise Browser Check- Open up your finished page in Netscape. Check all of the styling you did. Did it all work? Does it look exactly the same in both browsers. Write a paragraph summary(using a style, of course) directly underneath this paragraph. Make your paragraph have a maroon background with white text. Put a peach colored border around the paragraph. Also, make the text justify. Look up justify in the text alignment if you don't know what the word means.

If you open up a page done with Cascading Style Sheets in different browsers, you may notice slight differences in the way the pages are displayed. Each browser renders the page based on the code it was written with. Browsers are way more compatible today than they were a few years ago, however. As with any language, new or old, it is very critical to look at your work in different browsers.

When you are finished copy your entire firstname.lastname.CSS folder into the turnin folder. Open it up in Internet Explorer to make sure everything still works.