COP 1830 Project 3 - CSS

Purpose:

This project is intended to give students experience in composing a small web site involving Cascading Style Sheets (CSS). The project will employ all three methods of applying CSS styles to XHTML code: external, embedded, and inline. All files in this project will be written using a plain text editor to help students develop a fundamental understanding of XHTML and CSS syntax.

In this project, your grade will be based on how effectively you accomplish the stated goals in applying various styles to two web pages. Simply applying the styles is not enough; you must apply them using the requested method. Both the XHTML and CSS must be validated. The XHTML must validate under transitional standards using the [W3C Markup Validation Service]. The CSS must validate using the [W3C CSS Validation Service].

In this project, you will attempt to produce a pair of web pages that produce output as close as possible to the [illustration of the site] that has been provided as a separate Adobe® PDF file. For specific help with XHTML elements, look in your textbook or in the [XHTML Tag Index] from [W3SCHOOLS.COM] or other online references. For specific help with CSS elements, look in your textbook or in the [CSS2 Reference Page] from [W3SCHOOLS.COM] or other online references.

Project Constraints and Objectives:

• Use a plain text editor such as Windows Notepad program to create your XHTML and CSS pages. You must not use Word, Wordpad, FrontPage, Dreamweaver, or any other web authoring software. Remember, when saving a file with Notepad, you may have to place quotes around the entire filename to prevent the addition of the extension txt to the end of the filename.
• Create a folder on your computer named "project3" to serve as the sole folder for your project files.
• Create a valid CSS file named "project3.css" in your "project3" folder to serve as an external CSS style sheet for your site that defines (not just relies on defaults for) the following styles for your site:
  • A background image of the IRCC logo retrieved directly from the URL:
    http://www.gibsonr.com/classes/images/ircclogo.gif
    This image must repeat across the top of all pages to form a banner and must not disappear when a web page is scrolled vertically.
  • A background color of yellow.
  • A top margin of 120 pixels for the body to avoid overlapping the IRCC logo banner.
  • All headings of levels 1, 2, and 4 must be centered. All headings of levels 3, 5, and 6 must be left aligned.
  • Define pseudo-classes to cause your link anchors to appear as follows:
    • All types of anchors should appear overlined instead of underlined.
    • Unvisited links: green.
    • Visited links: red.
    • Links that you are hovering over: blue and bolder.
    • Active links: blue (but not bolder).
• Create a valid XHTML file named "default.htm" in your "project3" folder to serve as the home page for your project that will conform to the styles defined in your external style sheet. Hint: look at the link tag shown on the [W3Schools "CSS How To ..." demonstration page] and substitute project3.css for mystyle.css. Your default.htm file must contain inline style specifications that will override the external style sheet as described below. CSS and other criteria for this page include:
  • A title of "Project 3 - Default Page".
  • Headings as shown on the [illustration of the site] except that the alignment for the level 6 heading must be defined as centered using an inline style attribute.
  • Horizontal rules as shown on the [illustration of the site].
  • A block as shown on the [illustration of the site], written using the div tag with an inline style to cause it to have a double lined border and one half of a letter width padding offsetting the text. Also the box must be positioned horizontally to use only the right half of the page. Hint: see the float property. Note that the horizontal rule following the block must contain an attribute to clear the float to force that rule to be positioned under/past the block rather than to the left of it.
  • Use a one row borderless table to align two links that appear as shown on the [illustration of the site] as follows:
    • A left aligned cell containing link to your "embedded.htm" page.
    • A right aligned cell containing an email link to you.
• Create another valid XHTML file named "embedded.htm" in your "project3" folder to serve as a special page for your project that will use some but override others of the styles defined in your external style sheet by using an embedded style sheet (in the head section). CSS and other criteria for this page include:
  • A title of "Project 3 - Embedded Page".
  • Headings as shown on the [illustration of the site], all controlled by style definitions in the embedded style sheet as follows:
    • All headings of levels 1, 2, 3, and 6 must be centered.
    • All headings of levels 4 and 5 must be left aligned.
  • A background color of pink defined by an inline style attribute in the body tag.
  • Horizontal rules as shown on the [illustration of the site].
  • The instruction paragraph on Embedded Page (shown on the [illustration of the site]) must be accomplished with an ordinary paragraph element that uses a class named "instruction" that is defined in the embedded style sheet. It should show up in a smaller than normal italic red font.
  • The next paragraph must use a span element with an inline style defined to display the second sentence in italics and smaller than normal with a line through it.
  • Use a one row borderless table to align two links that appear as shown on the [illustration of the site] as follows:
    • A left aligned cell containing link to your "default.htm" page.
    • A right aligned cell containing an email link to you.
• Do not use any other images, color, etc., or other multimedia content on this project.
• Place a comment near the beginning of each file identifying yourself as the author and noting the date. Remember that XHTML comment tags look like this:
  <!-- Comment here -->
  and CSS comment tags look like this:
  /* Comment here */
• Use the [W3C Markup Validation Service] to validate your XHTML code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your HTML file as shown below.
  

  <?xml version='1.0' encoding='UTF-8'?>
  <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
   'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  

• Use the [W3C CSS Validation Service] to validate your use of CSS in each file you wrote. Note that the validator's By file upload method will work only for external (pure) CSS files. Embedded and inline rules will have to be validated using either the By direct input method or the By URI method (which works only for files stored on a Web server).

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create a simple web page with just one paragraph on it; then validate it. If it validates, then try adding some more elements and validate again, etc.
• Many systems are "case sensitive", so pay attention to upper and lowercase when typing URL’s and filenames in tags. Save your work after each change before trying to view it in your browser. Also, you must press the RELOAD (a.k.a. REFRESH) button on the browser’s button bar to see any changes made to a page since the previous rendering of it.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. If you get stuck on one element, then use comment tags (<!-- and -->) to mask any code that is causing trouble, move on to a different element, and come back to solve the problem later. Some frustration can be a valuable motivator to reinforce lessons. But too much can inhibit learning. Schedule your time to allow some breaks between working sessions.

Submission:

Your web site (with all associated files and folders) should be submitted via the Project 3 drop box under the Lessons tab on the . You should copy your "project3" folder into a compressed folder with the same name, but with a ".zip" extension.

Then, login to the and use the Project 3 drop box under the Lessons tab to attach your compressed folder.