Lab 4 Instructions

Using CSS to Format Web Pages

In this lab assignment you will practice using what you learned about CSS this week by applying it to the multi-page review web site you made for a previous lab.

Part 1: A style sheet for a single page

You will add CSS to the home page for the review site.

1. Create an embedded style (style element inside the head) with at least 3 different rules.
   (These should be different from the rules you will put in the external style sheet in part 2, and must affect at least one element on the page.)

2. Add at least one in-line style (style attribute) in an element on the page.

Part 2: A style sheet for the whole web site.

You will create a second style sheet that you will apply to the whole web site, including the home page that already has an embedded style sheet.

1. Create a external style sheet (.css file) with:

   • At least eight rules.

   • At least four different types of selectors including:

     • A single HTML element as a selector.

     • Multiple HTML elements as selector (contextual selector).

     • An id as a selector.

     • A class as a selector.

   • At least four different property types (color, font-face, text-align, etc.) across all the rules.

2. Link the external style sheet to every HTML page in your site.

   • Each HTML page should be affected by at least one of the style rules in the external style sheet.

Note: The home page will now have two style sheets (an embedded one and an external one). If there are rules in both style sheets with the same selectors and those rules have one or more of the same properties, the ones in the embedded style sheet will take precedence.

Check your pages using the W3C HTML Validator and the W3C CSS Validator.

Submitting your web sites

Uploading to Moodle

• Zip the files that mke up your review web site (which includes those from parts 1 and 2) into a single zip file.
  (The zip file should contain: index.html, three review .html pages, and a .css file.)

• Upload the zip file to Moodle using the lab submission link.

Publishing to citstudent

For fall 2023, we won't do this.

• Use FileZilla to upload a folder named Lab4, containing your web site, to citstudent.

• Record the URL of your home page so that you can enter it on Moodle.

Reference

• CSS Reference

   

Grading Criteria

Here is grading rubric for this lab assignment:

Lab 4 Rubric

Web Authoring Lab Instructions by Brian Bird, 2017, revised 2023, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.