Assignment(3) for CSS II

horizontal page spacer
Last modified: 09/27/08 14:59:37
Due: Wednesday Sept 17th


  1. Complete the job 'specification' below, Part 1 and Part 2. The "General Guidelines" apply to all assignments.
  2. Read Chapters 15 and 16 on Lists and Tables.
  3. Use Appendix B; The table of CSS Properties and Values.
  4. You must now have enough of a resume in place that one could decide whether or not they would be interested in hiring you (not necessarily finished). The same conditions on the resume apply; in a subdirectory, must be a link to the resume from your entry page, guidelines, . . etc.
  5. By the way, if the Mercyhurst image/link from the last assignment mess up the look of your entry page you may now remove it. And if you do not wish to have an email (mailto) link, you may remove or move it as well.

horizontal page spacer

Today's assignment is to continue fooling around with CSS. Most of today's assignment basically formalizes much of what you worked on for the first part (you do not have to go back to that assignment).
Again, this assignment is to be graded, and will be 'collected' 15 min before class.

Part 1

Continue to impress me with the very nice content you are creating. I now require further use of our new css properties (Chapter 10, 11). To receive full credit for this portion, I want original style rules created and implemented utilizing an external style sheet. I further require that the same style sheet is used for a minimum of two different html documents. This 'specification' builds on those given in the last assignment.

You should be implementing CSS on all/most of your pages - every page you have may use the same external style sheet. This comment is not directed at most of you, but one or two of you: I expect a bit more content on your pages - you know how you are.

Part 2

You will create an external style sheet my_example.css that will style the page: ex_css3.html. You must work with the existing page elements, id's and classes.

I will collect your CSS files my_example.css and they will be applied to my copy of ex_css3.html Your style sheet will, at a minimum, do ALL of the following:

  1. the body and/or content area should have a specified background color (or image is ok).
  2. The content area id="content" will have specified margins and padding.
  3. create a style rule to be applied to the top of the page information (topmatter) - anything you want, silly is strongly encouraged
  4. Create a style rule to alter the way h1 elements are displayed
  5. float the first paragraph (firstparagraph) in a box with a colored background (tacky and different than the body background; may also, like the body background be an image), aligned to the right of the page, resize the box so that it is not width:100%, a little padding, and what ever you want for a border. Note this rule only gets applied to the first paragraph.
  6. a rule that is list item specific to be applied to just one of the unordered lists. The style will change the font to sans-serif, smaller and some shade of blue other than color:blue; bold if necessary (must be readable) and apply to all of the list items in ONE of the unordered lists.
    If you wish to style the other unordered lists, they should look different.
    (note: blue = "#0000ff" = rgb(0,0,255); or = "#00f" - all of which we are not using in this particular specification. )
  7. create a class largeBold to render the text "ALL" so that it really stands out. You may note this class is used in the sentence: "... W3C Markup Validation Service</a> on <span class="largeBold">ALL</span> of your pages. ...".
  8. Change the color that the <pre> element renders the text
  9. create style rules to change the way links will be some displayed (not color:blue - I have that), not underlined and will have a some color background when the mouse passes over (link and :visited differently)
  10. write a style rule that will be applied using: class="greenMove". When applied to an element, will change the color of text to green and then shift the element down 25 pixels and right 15 pixels (relative to where it would have been otherwise). I specifically want you to use the rule inline on the text "aesthetically appealing" in the third paragraph, and leave the rest of the text in that sentence in place.
  11. Please experiment with other rules, there are a large number of additional ids and classes. You are NOT editing any of the existing content - just the manner in which it is presented (displayed).
  12. My goal in this part of the assignment - is to get you to try other style rules that you may then implement on your own 'real' pages.
  13. Have fun with this - I will award five homework points (bonus) to the most outrageous page (as voted on by the class, and myself).

Do not create a link to this directory (or page). I will find the file my_example.css. No one should have a link to their "testing" directory, since at any given instant many or all of the pages may not be valid; and you will be moving pages and content around.


horizontal page spacer horizontal page spacer

General Guidelines

  1. All XHTML assignments must:
    1. be created by the individual indicated in <meta name="author" content="Your Name" />. All your HTML files will contain this meta information,
    2. be created using a simple text editor,
    3. contain an accurately representative <title> element,
    4. be valid XHTML (one of the three allowable doctypes), as such, I might suggest validating all pages using the W3C Markup Validation Service (prior to submission).
      Any 'work in progress' should be performed on files in one of your construction (or playing directories).
      At the very least, while you are making significant changes to a file, mark it as such. For example, while editing file.html, copy it to file.testing.html then edit until satisfied; when you are finished (and validated) then copy file.testing.html back over file.html. Any work not so marked or outside of such a directory must be valid XHTML (with the exception of content generated for another Mercyhurst class, such as webmapping).
    5. use the extension ".html" for all of our HTML content. All required files are to be placed in your public_html directory on gauss prior to class.
    6. NOT use deprecated or presentational tags.
      Do not use: font, b, i, tt, big, small, center, u
    7. You should very much resist adding presentational attributes to your HTML elements, such as the deprecated attributes:
      align, background, bgcolor, clear, color, size, type, vspace
      We will learn how to do this correctly and powerfully when we get to CSS.
  2. Homework assignments
    1. I suggest you start small, adding in pieces of each requirement as you go, thinking modular when ever feasible.
    2. I strongly suggest using the Firefox extension 'HTML Validator', then you can validate every time you reload a page.
    3. You should think of yourself as an independent web company, competing for this and future contracts (your classmates are the competition I am the client). Better work is more likely to receive better compensation (grades in this case).
    4. You should always complete and validate all the requirements of the assignment before you start adding extra components or 'window dressing'.
    5. You can think of the author of our texts as part of your development team, thus any source code created by the authors is fair game (I have most of it served locally).
    6. It is your responsibility to clarify any portions of the assignment that are not clear to you.
  3. There are no group assignments in this class. All assigned work is individual work. Helping your classmates is encouraged, as in collaboration at a high-level. As you are all aware, outright sharing or copying of code is cheating.
    Please review my collaboration remarks., if you are still unsure please ask.
  4. All assignments, unless you are told otherwise, are to be completed prior to the next class. Occasionally, I will ask you to let me know when you have completed the assignment (via email). You will not have to email me your code, I typically 'collect it' just prior to class.
  5. I strongly caution you against using any prior html pages you created - unless at the time you created them you were web standards savvy.