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

This assignment addresses the "cascade" in Cascading Style Sheets as well as the subject of CSS rule specificity.

Homework Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict DOCTYPE.
• Validate your work using an HTML validator (see Resources page).
• Put any images into a folder called images.
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact us.
• Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
• Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.

Specifics

This homework will give you practice with three important aspects of working with CSS: linking and attaching external style sheets, using the normal cascade of style sheets to determine the styling outcome of a web page, and using specificity to make a particular style rule override the normal cascade of style sheets.

Carefully follow the sequence of instructions to create the three files listed below. You will be copying and renaming previous homework files for use in this assignment.

If you have not already done so, create a directory named week_3 into which you will place the homework_3b files.

You will use a copy of homework_2b.html and the css file that you attached to it, in addition to creating another style sheet, in order to explore the cascade of styles.

Part I - Collecting the Files

• Create a copy of last week's homework_2b.html and save it as a new XHTML document named homework_3b.html. Put this document into the week_3 directory.
• Be sure this file uses the Strict DOCTYPE.
• Save a copy of the external css file that was attached to last week's homework_2b.html. Name the new document 3b_blue.css. Put this new css file into the week_3 directory also.
  __________
  
  
• Create a new, blank css file named 3b_green.css and save it in the week_3 directory; leave it open.
• In your week_2 directory, find and open last week's homework_2a.html file. Copy the embedded styles, pasting them into 3b_green.css. Save the document.
  __________
  
  
• Create an images sub-directory in the week_3 directory. Copy the two images used in homework_2a and homework_2b into the week_3/images directory:
  
  stylin_logo1.gif
  smball.gif

At this point the week_3 directory should contain the images sub-directory plus the following three files (and possibly your homework_3a files):

• homework_3b.html
• 3b_blue.css
• 3b_green.css

Part II - Attaching the First External Style Sheet

• Open homework_3b.html and change the Comments in the head of the document to reflect the current date, etc.
• Change the link to the external style sheet in the head of the document so that it now points to 3b_green.css. View homework_3b.html in your browser. It should look like this:

  

• Save and validate your document.

Part III - Attaching the Second External Style Sheet

• In the head of the HTML document immediately following the link to 3b_green.css, create a link to the external 3b_blue.css style sheet.
• View the document in your browser.

  

• Save and validate the document.

Note that the blue styled page does not look exactly like it did last week. Some of the margins are bigger, the first line of the paragraph text is now indented, and the headings are slightly different. This is because the document is now displaying a combination of styles from 3b_green.css and 3b_blue.css files.

Open the two css files (3b_green.css and 3b_blue.css) and find the style declarations that conflict. Note which ones 'win.'

Part IV

• In the head of homework_3b.html create an embedded style sheet and add the following styles:
  
  

  Tag	Style
  body	0 margins all around
  h3	text is not underlined

  
  
• Which CSS file(s) contain the rules that the new embedded styles trump?
• Save, test, and validate your document.

Part V - Using Specificity

• Open the external style sheet 3b_green.css.
• At the bottom of the document, add a new style that makes the H1 text color become gray (999999). Use specificity to make this happen. Think about other selectors you could combine with the H1 tag to give it more weight so that it will overcome the normal cascading order of styles.
• Save, test, and validate the documents.
• Upload the finished files to your web space.
• Create a link to homework_3b from your Home page.