Not logged in. Login

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:

screenshot with style1.css

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.

screenshot with style2.css

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.)


Submit your files through CourSys for Exercise 2.

Updated Mon Aug. 30 2021, 07:36 by ggbaker.