CogSci 3 Assignment 3b--XHTML Table CSS
Due Saturday, October 24th, 2009 11:59pm

You might want to review the class notes on cascading style sheets (CSS).

Goals

1. Create a CSS sheet to work with XHTML table assignment (part 1)
   1. Learn how to use the class attribute.
   2. Learn how to use special declarations to define specific link events (a:link, a:visited, a:hover, and a:active.)
      
      
      The content of this work is creative while the structure of the page should follow the directions in this assignment.

Note: if you wish to use a home PC or Macintosh, you should use Firefox to view your work, as that is what we will use to grade. If you elect to use Internet Explorer instead of the recommended browser, you do so at your own risk since it has a tendency to display HTML differently)

Creating your own table header style for your "Summer 2009" Class Schedule" using a class selector.

Styling a table with CSS has mayor advantages since it separates the structural markup from presentation formatting. Which is what CSS is all about!

It offers a lot of flexibility on the way you present your table.

Save your CSS file as: table-cg3fzz-style.css in hw3 folder.

Be sure to add the css link element to your xhtml file: table-cg3fzz.html (and table-cg3fzz-EC.html if you did the extra credit) in hw3 folder. (Link information was covered in an earlier assignment if you need to review the details.)

You have the freedom to style each table cell separately if you wanted to do that.

Go to this site to find named colors to use in your style sheet.

Extra Credit!

The page in the link above has a link to "web safe" colors. Instead of using the named colors, use colors from the web safe page. In order to get credit, create a CSS comment near the top of your CSS sheet that looks like:

	/*
	 * Extra credit: web safe colors
	 * #00CCFF is a turquoise like blue
	 * #666600 is olive 
	 */
	

Change the format for the first row in your table

You create a style definition in your .css document, but then use class="..." in your .html document.

Note that the class name is defined with a leading '.', but the '.' is not used when we "call it" with the class="..." attribute.

Define a class that formats the time column in the schedule table.

Provide a default style for the <td> and <h1> elements.

these changes should only occur in the style sheet. That is, you don't need to change the <td> or <h1> tags. define a style that is compatible with the formatting that you selected for the table_header and table_time classes. (compatible means the colors go well together.) note: this change will affect all of the <td> and <h1> elements in your xhtml document. hint: this is very similar to what you did in hw4.

Rules for the Hyperlinks

CSS provides special declarations to define specific events as opposed to elements. The anchor element <a>, is used to define links in a document. The default link color is blue. Once you click on a specific link, that link changes color, usually to purple, in order to show that the page has been visited. CSS provides special properties to control these colors. Here is a link that goes over these rules and properties.	a:link { color: blue } a:visited { color: purple} a:hover { color: yellow} a:active { color: red}
Change the a:link, a:visited, a:hover, and a:active colors.
In the style sheet, change the default colors for the links.

Extra Credit!

If you get daring, change the shape of the cursor when one hovers over a hyperlink on the page. (Normally it is a hand with a pointing finger.)

Be sure to put a comment in your CSS sheet above the definition you used to change the shape. As well as describe your definition, also use the words EXTRA CREDIT (in caps).

save the CSS file as: table-cg3fzz-style.css in hw3 folder.

Once you are satisfied with both your pages, and you are working in one of the ACS labs, you are done (since you have been saving your work in your hw3 folder in your "Class Resources").

If you are working at home, you will need to use Filezilla or Fugu again to upload your files. Be sure you come into an ACS lab and log into Windows and verify your work by using Firefox to open your files.

How We Will Grade

• We are going to grade using browser equivalent to the Netscape browser that is available in ACS labs. If you used Internet Explorer to preview your work, consider double checking your work with the recommended browser.
• Your page should look as much like the sample as possible.
• Be very careful about vertical spacing. We're very picky. Incorrect vertical spacing may mean you have used the wrong tags!
• We will look at your XHTML and CSS code and how the browser interprets it.
• We would like to see a comment in your CSS code describe each definition.

Original ©opyright 2006 October 21, 2006 Mary ET Boyle
Modified: November 2007 mrw