GRA 3758 Project 3 - CSS

Purpose:

This project is intended to give students experience in composing a web page involving Cascading Style Sheets (CSS). The project will employ all three methods of applying CSS styles to XHTML code: external, embedded, and inline. It will also require that you understand the different types of "selectors" (class, id, and tag) used to define CSS rules. If you are not clear about the meaning and use of these methods, you should review the CSS chapter in your textbook or contact your instructor for help before starting the project. 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.

Your grade on this project will be based on how effectively you accomplish the stated goals in applying various methods to style your 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 web page that produces 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 [HTML/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:
  
  1. A banner (background image) accessed directly from the URL:
     http://www.gibsonr.com/classes/images/10wave.png
     This image must repeat across the bottom of all pages to form a banner and must scroll up and down with the web page.
  2. A background color of light blue matching (a closely as reasonably possible) the one seen in the [illustration of the site].
  3. A bottom margin of 200 pixels for the body to avoid page content from overlapping banner image.
  4. All headings (all levels: 1-6) must be left aligned.
  5. All hr elements must be: dark red, 8 pixels tall, and extend horizontally to use 80 percent of the width of the window. Note: see the web page at [www.sovavsiti.cz/css/hr.html] for an explanation of how to define the color to render sucessfully on all browsers.
  6. Define a rule for an id selector named "email" that can be applied to any element within a web page that has been named with that id attribute. The CSS rule shall cause the element to render in the smallest "Courier New" font possible and float to the right side of the window.
  7. Define a class selector named "copy" that can be applied to web pages elements to center the text within the element and cause it to render in the smallest "Arial" font possible and clear (render beneath) any object that has been floated in either the left or right direction.
• Create a valid XHTML file named "project3.html" in your "project3" folder that will conform to the styles defined in your external style sheet. Hint: look at the link tag shown on lines 9-10 in Figure 4.8 at the bottom of page 115 in your textbook and substitute project3.css for styles.css. Your project3.html file must contain an an embedded style sheet (in the head section) that will use some, but override others, of the styles defined in your external style sheet. The web page will also contain some inline style specifications that will override the external and embedded style sheets as described below. CSS and other criteria for this page include:
  1. A level 1 heading that reads "Heading 1 (aligned by an embedded rule)", that (as its content indicates) is aligned by an embedded CSS rule.
  2. Below that, a horizontal rule as shown on the [illustration of the site] that is rendered that way because of an external CSS rule (see that section above).
  3. A level 2 heading that reads "Heading 2 (aligned by an inline rule)", that (as its content indicates) is aligned by an inline CSS rule within the h2 tag.
  4. Below the level 2 heading should appear a paragraph element as shown on the [illustration of the site] that is rendered based on only embedded or external rules (if any) declared for the paragraph tag, or on CSS rules defined within the client (browser).
  5. Below that, a level 3 heading that reads "Heading 3 (aligned by an external rule)", that (as its content indicates) is aligned by an external CSS rule.
  6. Below the level 3 heading should appear a box (a block-level div element) as shown on the [illustration of the site]. Its background should be green. The div should be defined with use margins and padding all around with each dimension roughly equivalent to the width of two characters of mono-spaced text. It should have a double-lined border. Declare a CSS class rule named "box" in the embedded style sheet (defined in the file's head section). Note: the class must be defined such that it can be applied only to division elements.
  7. That should be followed by another ordinary paragraph element as shown on the [illustration of the site]. Note that each occurance of the words "external", "embedded"", "id"", and "inline" within this or any other paragraph on your page must be rendered both italic and boldfaced as the result of applying a CSS class named "special" (declared in the page's embedded style sheet) rather than by using XHTML elements such as em and strong. Because these words are only a part of the paragraph, the classes must be applied using span elements as containers for each occurance of these words. The word head and the filename project3.css must be coded using the XHTML code (source code) element (which can be seen by viewing the source code for this instruction page).
  8. The email address at the bottom of the page must be coded using a division element that has been given the id attribute of "email" which was styled by an external CSS rule. (See item F in the instructions above for the external style sheet.)
  9. The copyright notice at the bottom of the page must be coded using a division element that has been given the class attribute of "copy" which was styled by an external CSS rule. (See item G in the instructions above for the external style sheet.)
• 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'>
  

  Also add a meta tag inside the head section of your XHTML file that defines the character encoding your page will use. The syntax for this tag is:

  <meta http-equiv='Content-Type' content='text/html; charset= utf-8' />

• 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).
• The specifications given above for this project should not be dependent on expected default values. Every browser has its idiosycracies and there will be new browsers that might follow different defaults than present day browsers. So specify each intention explicitly, even if you believe that it is a default.
• Any instruction given above to produce styling that appears to cause an exception to another instruction is intentional. You must consider and use the "cascade" of CSS to accomplish these intentional exceptions.

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.