Reading Assignment

We are moving on from Chapter 3 to Chapter 4 of the textbook even though we have not covered forms and tables from Chapter 3 in our assignments yet.

We will be using only some basic selectors and properties in this assignment, but you really need to read through all of Chapter 4 now rather than try to pick out just the bits and assignments needed for this assignment. See what’s there now, and you will be able to refer back to the various parts of the chapter as needed in the weeks to come.

Coding Assignment

1. Create a stylesheet.

   If your My Website directory does not yet have a subdirectory, create it now. You can do this from within Dreamweaver: right-click on the “Site” line at the top of the files pane (which should be on the left side of the Dreamweaver window, assuming you have selected the “Coder” or “Coder Plus” workspace layout from the Window menu); select New Folder from the drop-down menu, and then click twice on the “untitled” name and change it to css.

   Remember: capitalization will matter when I copy your site to babbage for grading. Be sure to use the same capitalization here and in the link element you write in the next step. The convention is to use lowercase, but that doesn’t matter as long as you are consistent.

   Now right-click on your css directory, and create a new file. Click on the name twice so you can edit it, and change the name to style.cc. Edit the file and remove anything that Dreamweaver put in it.

2. Link your stylesheet to your index.xhtml page.

   Add a (self-closing) link to index.xhtml; set the rel, type, and href attributes to “stylesheet,” “text/css,” and “css/style.css” respectively.

   Add a rule to the stylesheet that causes all paragraphs to have red text as demonstrated in class:

   p { color:red; }

   Test your code: be sure text in the paragraphs of your web page is all red. Click the CSS validation link at the bottom of the page, and be sure there are no errors or warnings. Fix whatever is wrong if there are problems.

3. Change the appearance of the page.

   This is an exercise in following instructions as much as it is an exercise in using CSS. Pretend you are creating this web page for a client who is paying you to bring his or her vision to life. If you want to get paid, you have to resist the urge to do anything differently from what the client asked for. Here are your client’s requirements:

   • Make the text all level-1 headings blue. Use the text-align attribute to center the heading.
   • Make all elements with the class “important” have the font-style value italic. Add the important class to the first and third paragraphs, and to the second item in your list.
   • Make all elements with the class “interesting” have green text. Add the interesting class to the third paragraph and to the first and second items in your list.
   • Make the element with the id “unique” display as bold (attribute font-weight) and blue. Give the second paragraph the “unique” id.
   • Set the left and right padding for all paragraphs to 1em; set the top and bottom padding to 0. (See pages 109 and 112 of the text.)
   • Set the display property for all list items to "inline".

4. Check your work carefully.

   When you finish, your page should look pretty much like the screenshot below. Your actual text may differ from this, but the colors, fonts, and layout should be the same. If not, fix it!

   Be sure both validation links come up with no errors and no warnings, except for the one XHTML warning about that validator being experimental.

   

Submit the Assignment

When your page is ready for me to review, send an email message to Christopher.Vickery@qc.cuny.edu with CS‑081 Assignment 4 as the Subject line. All you have to do is to put your name in the body of the message so that I know who sent the message. I will then copy your website from your profile on the server (oak) in the lab to the web server on babbage, where I will verify that it works correctly.

• The web server on babbage is on a case-sensitive file system. That means that if you don't capitalize file and directory names exactly right, your site will no longer work when it is copied to babbage, even though it may have worked perfectly well in the lab, where the file system is case-insensitive. Be sure the name of you web page is index.xhtml using all lowercase letters.
• Your site will not be copied to the DocumentRoot on babbage, so any links with absolute pathnames (ones that start with a / character) will not work: make sure that all internal links in your site use relative, not absolute, pathnames. This is not an issue for this assignment (there are no internal links), but important to keep in mind for future assignments.