Homework #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 XHTML for these questions (except the stylesheet link).

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

   

   Hints: the dotted line is not part of the screenshot. The display property will be useful for the menu list items. The colours I used were #228 and #bbb. You don't have to match the fonts or spacing exactly.

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

   

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

3. Pick one interesting-looking CSS technique from one of these articles:

   • Powerful CSS-Techniques For Effective Coding
   • 53 CSS-Techniques You Couldn’t Live Without
   • 101 CSS Techniques Of All Time

   Create an HTML page and corresponding CSS file that demonstrates that technique. Include a note/link on the page about which technique you are implementing. [You are free to ignore any techniques that rely on Javascript.]

4. For each of the CSS files you produced, use the CSS Validator to make sure they are valid. (For question 3, CSS hacks that are intentionally invalid can be ignored.)

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

5. Attach the files you created to an email to zju.webdev@gmail.com with the subject “Homework #2”. Be sure to include your student number (学号) in the body of the email.