Exercise 2

For this exercise, you will explore some basic CSS techniques.

1. Save the file exer2-menu.html. The page has a heading, menu, and some contents. You may not change the HTML for these questions (except maybe the stylesheet link if it makes your life easier):

   Create a stylesheet style1.css that makes the page look more-or-less like this:

   

   Hints: dotted line is not part of the screenshot; the display property for the menu list items; colours I used were #228 and #bbb; no need to try to match the fonts or spacing exactly.

2. Create a second stylesheet style2.css that makes the page look more-or-less like this.

   

   Hints: colours I used were #64a and #66c.

3. Pick three CSS2 or CSS3 features from one of these guides: The Quirksmode CSS browser compatibility page or CanIUse.com. Use the reference guides to make sure the three features you pick work in the most recent version of Firefox, Chrome, and Internet Explorer.

   Create an HTML page and corresponding CSS file that demonstrates these features. Include a note/link on the page about which features you have implemented.

4. For each of the CSS files you produced, use the CSS Validator to make sure they are valid. (For question 3, you can ignore errors relating to custom browser prefixes like "-webkit" and "-moz".)

   Also check the validity of the HTML you created for question 3.

5. Use an SCP/SFTP client to transfer the files you created to the public_html directory in your home directory on cmpt470.csil.sfu.ca. (There is an SFTP client installed in CSIL, and there are some free alternatives available on the web.) If you upload a file exer2-menu.html to your public_html, it should be accessible at this URL:
   http://cmpt470.csil.sfu.ca/~userid/exer2-menu.html

   Check the URLs before you submit to make sure everything is being displayed properly.

Submit the URLs of your work through the Course Management System.