Due Date: Wednesday January 31, 2007 by 10:00 PM (week 4)

From this point forward you will begin to experiment with styling your Home Page using various concepts and techniques that we cover each week. This week you will create a new style sheet for your Home page and experiment with advanced selectors, pseudo-classes and specificity.

Submission instructions are at the end of this document.

This homework assignment assumes that you followed the initial instructions for Homework 1 and now have a home.html document. This document should be valid XHTML code and look similar to the illustration in the original instructions.

This week you will modify the Home page by eliminating the embedded styles and creating a linked style sheet. From there we will begin experimenting.

We will continue to add to, edit and change the Home page styling throughout the term.

Getting Set Up

• Create a backup of your existing home.html file so you have something to revert to if necessary.
• Create a new blank css file and name it homeOriginal.css.
  
  Copy the embedded styles that are currently in the head of your Home page and paste them into homeOriginal.css.
  
  Save this document at the same directory level as home.html. (The directory location can make a difference when using the Web Developer toolbar.)
• Remove the embedded styles from home.html. Create an external css link in the document head and connect the new homeOriginal.css style sheet.
• Test and Validate both the HTML and CSS documents.
• Once both files validate, make a copy of homeOriginal.css and name it home_3a.css. Save this document at the same directory level as home.html.
  
  Alter the CSS link in the head of home.html so that it now attaches to home_3a.css.
  
  We will keep homeOriginal.css as our 'master' css file and will be making copies of it many more times throughout the term so that we can experiment with a new set of CSS techniques each week.

Week 3 Experimentation

The Home Page Project takes a different approach to learning CSS. This will be a little more like the 'real world' in that you will be given complete stylistic freedom when interpreting the instructions. The more you explore and experiment, the more you will learn.

Of course if something doesn't make sense or you get totally stuck, post your questions in the forum.

• Without altering the markup file (other than adding your new homework links), make style edits only in the home_3a.css file.
• As you work through this assignment, create a CSS comment at the top of the style sheet and write down what you did to satisfy each of the four directives below. Any homework submitted without this documentation will garner heavy penalty!
• Find ways to apply the following CSS directives to your Home page. Be as creative as you like!

1. Use the Universal Selector in some way.
2. Create a new rule using a child selector.
3. Use pseudo-classes to create navigation roll-over effects.
4. Create two rule declarations for one element that demonstrates how greater specificity 'wins.' Be sure to put the winner before the rule that does not win to show that it is specificity, and not the order of the cascade, that is making the rule work.

Submitting this Assignment

• Remember to write comments at the top of the CSS file telling me what you did!
• Upload, test, and validate your home.html, homeOriginal.css and home_3a.css files, and any required images, to your web space on the CTIS web server.