The following file is required for this lesson:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps

  1. Download the demo-cascade.zip file and extract the contents.
  2. Create a folder called demo-cascade and copy the extracted contents into this folder.
  3. The resulting solution looks like:
    cascade-final.jpg
  4. The first step is to modify the styles.css file in your css folder using the following rules (images of the code are shown; the comments with each style rule can be omitted):
    1. Style the <footer> element:
      footer element
    2. Use multiple selectors to target certain elements in the <footer>:
      footer elements
    3. Use descendant selectors to be more precise for the <ul> element:
      ul element
    4. Use multiple levels of descendant selectors to target specific <li> elements:
      ul element
    5. And even more levels of descendant selectors:
      ul element
    6. Target the pseudo classes for the hyperlinks:
      hyperlinks
    7. Finally, target class selectors:
      class selectors
  5. Link the stylesheet to your index.html file.
  6. Validate your HTML using https://validator.w3.org/.
  7. Save your work and open index.html in your browser.

Exercise Instructions

There is no related exercise for this walkthrough.

Module Home

COMP1017 Home