ah teaches information design

Feb 27: P3 CSS Exercise (In-lab)

As part of your P3 submission, you will be completing a series of in-lab exercises. This exercise has you starting to work with CSS.

This exercise is worth 2 of the 10 marks for P3: HTML/CSS.

The Rules

To help guide you in this process — and to introduce you to the in-lab exercises for the course — we have some basic rules to set up:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. Cite any knowledge that is not yours in a comment in the code. The internet is a glorious repository of information and you are welcome to draw on it, but you must let us know when something does not originate from your own knowledge.
  3. If work has been copied without citation the entire exercise grade is forfeit. A simple solution to this potential problem is to just note where your knowledge is coming from.


For this exercise you will be styling the HTML you built as part of the P3 HTML Exercise using CSS. Please complete the following before the end of your lab time:

  1. Open up your submission from P3 HTML Exercise, and make sure you have at least:
    • In-text links or navigation buttons.
    • A placeholder image.
    • At least two levels of heading.
    • A couple paragraphs of text.
    • An image of your wireframe.
  2. Create and link a CSS file to your HTML submission from P3 HTML Exercise.
  3. Style the page to demonstrate the following:
    • Changing the default font for the entire page.
    • Add a hover and focus state styling to the in-text link or navigation buttons.
    • Shorten the default width of the <p> element, but ensure it is still responsive — that it does not add horizontal scroll bars — when the browser window becomes skinnier than the default width you have set.
    • Make sure that the <img> element on the page is still responsive — that it does not add horizontal scroll bars — when the browser window becomes skinnier than the width of the image.
  4. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
  5. Validate the page using the CSS Validator to find any errors or potential problems in your styling.


Please upload your file to your SFU filespace and submit the URL to the Canvas assignment.

If you have trouble uploading your file in lab and you cannot resolve it with the assistance of the TA, please simply submit the required files in a ZIP.

Your submission is due before the end of your lab time.

Recommended Resources

Grading Rubric

This exercise will be graded on the following: