Exercise 2
For this exercise, you will explore some basic CSS techniques.
Style 1
Save the HTML 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).
Create a stylesheet style1.css
that makes the page look more-or-less like this:
The exact display of the page will change depending on the window/font size. It should change in a reasonable way.
Hints: The line breaks and widths will change with the window size and that's okay; 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.
Style 2
Create a second stylesheet style2.css
that makes the page look more-or-less like this.
Again, the display should adapt to different window sizes in a reasonable way.
Hints: colours I used were #64a
and #66c
.
Other CSS Techniques
Pick two interesting-looking CSS techniques from these articles:
[If you have any other suggestions for techniques to add here, email Greg.]
Create HTML page(s) and corresponding CSS that demonstrates that technique. Include a note/link on the page(s) about which technique you are implementing. Pack the files up in a ZIP for submission.
CSS Validation
For each of the CSS files you produced, use the CSS Validator to make sure they are valid. (For part 3, CSS hacks that are intentionally invalid can be ignored.)
Submitting
Submit your files through CourSys for Exercise 2.