Reading Assignments

Continuing to work on material from Chapter 4. We covered the Box Model (pages 106-113) in class, but are not doing much with it yet. This assignment deals with Advanced Selectors, some of which are covered in the book starting on page 117.

The text covers some of the New Selectors available in CSS3, which you will be using in this assignment, in Chapter 12, starting on page 304.

But the definitive specification of all CSS3 selectors is the one shown in class on October 28, the W3C specification at www.w3.org/TR/css3-selectors/.

Coding Assignment

1. Remove all class and id attributes from index.xhtml.

   Doing this will “break” most of what you accomplished in Assignment 4.

   Verify that the effects you created in Assignment 4 no longer work.

2. Edit the selectors in your stylesheet so that the web page looks the same as it did in Assignment 4.

   There is no strict rule that you have to follow here: you can use any CSS3 selectors you wish so that each rule applies to exactly the same elements as it did when you were able to use classes and ids. The idea is to identify the position in the DOM tree for the elements each rule is to effect, and then to choose selectors to pick just those elements.

   Be sure the web page looks exactly the same as it did for Assignment 4 when you finish, and be sure both the XTHML and CSS code validates with no errors and just the one XHTML warning.

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 5 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.