The following file is required for this lesson:

Introduction

This demo is a walkthrough of the CSS Selectors Exercise.

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-css-selectors.zip file from Moodle and extract the contents.
  2. Create a folder called demo-css-selectors and copy the extracted contents into this folder.
  3. The starting solution looks like:
    demo-start.jpg
    And the finished result looks like:
    css-selectors-final.jpg
  4. The first step is to create the styles.css file in your css folder.
  5. The code in this file uses the following rules (images shown; the colours shown beside each colour are automatically generated by Visual Studio Code):
    • Multiple selector code to set margins and padding:
      styles-css-a
    • Set the <body> for font and font colour:
      styles-css-b
    • Set the <footer> padding and background colour:
      styles-css-c
    • Format the <h1>:
      styles-css-d
    • Create a class to format the items on the menu:
      styles-css-e
    • Format the <section> element:
      styles-css-f
  6. Add the link to the stylesheet in index.html.
  7. Style the <ul> elements as shown below:
    style-ul.jpg
  8. Validate your HTML using https://validator.w3.org/.
  9. Save your work and open index.html in your browser.

Exercise Instructions

Download the ex-selectors2.zip file from Moodle and extract the contents into a folder called ex-selectors2. You are to create a stylesheet, styles.css, in your css folder. Link your stylesheet to your index.html file. The resulting web page should look like:
ex2-final

Lab Instructions

Make a copy of your demo-css-selectors project and name the copy css-selectors-lab. Modify your styles.css, and any necessary changes to index.html to get the following results (the multiple screenshots are captured from a single web page):
lab-final

Complete and submit your lab following the instructions on Moodle.

Module Home

COMP1017 Home