Cascading Style Sheet ProjectDue: April 14, 2006

Description:

This assignment requires the student to create CSS formatting rules and link them to the web pages created in the HTML assignment.

This assignment is meant to allow the student to demonstrate their understanding of the following CSS constructs and features:

  • Basic element formatting
  • Contextual element formatting
  • Class selectors
  • Pseudo class selectors
Submission:

The assignment should be turned in prior to class on the due. All HTML, CSS, and image files should be included in a single ZIP file. The file name should be of the format lastname_css_assignment.zip. The timestamp associated with the file upload will determine whether the assignment was turned in on time.

Conditions:

The assignment should comply with the following conditions:

  1. This homework assignment should be completed individually, not in pairs or groups.
  2. Only those features covered in class up to this point should be used in this assignment. Comments in both HTML and CSS files are encouraged.
  3. The HTML conditions remain the same as in Assignment #1, although you may adjust the sizes of the frames as needed to accommodate your formatting design..
  4. Only one CSS file should be used, and all the HTML files should link to it.
Requirements:

Modify the HTML pages created in HTML assignment, replacing all formatting instructions with the appropriate CSS formatting rules. Although you may select the specific colors and dimensions, the following formatting conditions must be met:

  • Common formatting
  • All the HTML files should depict a consistent presentation format. The following conditions apply to all pages.
  • The text used in headers should be within the same general font family (i.e. Serif or Sans-Serif). Header text should use a consistent color scheme.
  • The text used in paragraphs and in other non-heading areas should use a font family that is different than that used by the header text.
  • When using any of the <bold>, <strong> or <em> elements for inline formatting, one or more of the default formatting characteristics must overridden by CSS rules.
  • All fonts should use relative size units. Borders, margins and padding may use either relative or fixed size units as appropriate.
  • Header page
  • Your name should be displayed in a reverse color scheme from the other headers in the other web pages (e.g. white on a black background).
  • Navigation page
  • The links in the navigation page should use large margins and/or padding to simulate the look and feel of navigation buttons.
  • There should be no underline on the link text.
  • The link text colors should remain the same before and after visiting the link.
  • The colors of the link should reverse when the cursor hovers over the link text.
  • Résumé
  • Section headers, those that have sub-headers following, if used, should stand out from the other less important headers.
  • Any headers that have text following them should sit close to the text that follows.
  • Your name should be prominently displayed at the top of the résumé.
  • Your contact information, including mailing address, email address and phone numbers should also be near the top set off from the remainder of the résumé
  • The paragraphs in the objective section be indented from both the left and the right.
  • In the work experience section you should highlight the text of your job title.
  • The list used in the education section should be displayed without any kind of bullet symbol. And the text of the university name should be highlighted in some fashion.
  • Recipe
  • The ingredients list should use squares for the bullet symbol.
  • The numbered list in the directions section should use roman numerals.
  • The section that describes the story should be use a special font, color and background color to make the section stand out.
  • Cars
  • The hyperlinks in your references to the source of your pictures should be displayed in a font size that is 80% of normal, green italics, with no underline, and should not change its look after being visited.
  • Schedule
  • The header rows should use a light colored text on a dark background.
  • The header columns and the footer row should use a bold font in the normal color scheme.
  • The text in a data cells should use a font that is unique to the table.
  • The Course ID and Course Title for your current courses should use a CSS class called current and be displayed in a highlight color and normal background color.
Grading:

The grade will primarily be based on the proper definition and use of CSS rules and whether the CSS and HTML files the W3C validation checks.