CS-081 Assignment 3

This assignment is to start working with stylesheets to alter the appearance of your web pages. There are three main aspects of a page’s appearance that you can control with CSS: colors and backgrounds, typography, and geopmetry (layout). For this assignment, you are to work only with colors and backgrounds. We’ll work on the others in future assignments.

1. Create a stylesheet directory for your web site.

   Create a directory to hold all the stylesheets for your web site. You can do this from within Dreamweaver by right-clicking on the site folder and selecting “New Folder.” The conventional name for this folder is css (lowercase letters), so unless you have a complelling reason for doing otherwise, you should use this name too.

   Remember that file and directory names are case-sensitive on most web servers, including the one I will be using when grading your assignment. If you use the name css for this directory (folder), be sure you capitalize it that way when you link to the stylesheets in it. If you capitalize it differently, capitalize your links accordingly. If you fail to match capitalization, your web pages will seem to work correctly in the lab (because Windows does not use case-sensitive file and directory names), but will fail when I look at them on babbage, which is a Unix computer. You can check you have set up your links correctly using Dreamweaver’s link-checking feature described below.

2. Create a stylesheet for your site.

   Create a new file in your css directory, and name it all-media.css. Create a link to it in the head element of your index.xhtml file. (There are two of these; set up the link in one, and then copy it to the other.) The link tag must have the following three attributes, and should also have the fourth one as well:

   1. rel — the value must be "stylesheet".
   2. type — the value must be "text/css".
   3. href — the value must be the relative path to your stylesheet. For the site index page, this will be "./css/all-devices.css", and for the blog index page, it will be "../css/all-devices.css". Note the difference between “./css” and “../css” in these two paths.
   4. media — the value should be "all" because this stylesheet is for all types of media.

   Enter the following rule in your stylesheet:

   body { background-color: black; color: white; }

   If the stylesheet and links are set up correctly, both your main and blog pages should come up with white text on a black background, You may need to refresh your browser (Ctrl-R) to see the effect. On Firefox, you might even have to hold the shift key while refreshing to get it to load the new stylesheet.

3. Use different colors for various elements of your web site and blog.

   You may use any colors you like, provided you satisfy the following requirements:

   1. All text must contrast with its background so that is can be read easily. I don’t have to like your color choices, but I have to be able to read the text.
   2. All color settings have to be done using rules you enter in all-media.css. There will need to be some changes in the attributes of some of your web pages’ elements, but only those indicated below.
   3. Your rules must demonstrate all of the five different ways of specifying colors (color names; rgb() percentages; rgb() numbers; six hexadecimal digits; three hexadecimal digits). Normally, a single consistent way of specifying colors would be the best practice, but this is a learning exercise. You get to pick which style you use where.
   4. Pick a color other than black or white for the background of the entire web page. Check this setting in all browsers (Internet Explorer, Firefox, Safari, Opera, and optionally Chrome). If necessary, add the html tag name to the selector you use for this requirement.
   5. Pick a color other than the page background color for all h1 elements in all your pages.
   6. Give your blog entry list an id attribute, and give a different background color to this element.
   7. Give all h2 elements that are inside the blog entry list a background color that is different from the background color of the whole list.
   8. Give a class attribute to the dateline paragraph of each blog entry, and give all the datelines a background color that is different from the blog list background color.
   9. Give the first paragraph of each blog entry a background color that is different from the other paragraphs in the entries.
   10. Use a different background color for the div containing the validation links at the bottom of each page.

   Check your main and blog pages in all browsers to be sure they work everywhere.

4. Check your links.

   In Dreamweaver, right-click on the root element of your web site, and a drop-down menu will appear that includes an item called Check Links. Select it, confirm that you want to check the entire site, and you will get a report of any broken links in your code. Assuming you have the “case-sensitive link checking” option checked for your site, the most common problem that will show up is if you somehow used different capitalization in your link or a elements and the actual file or directory names on the computer. In the lab, it’s very hard to change the capitalization of a file or directory name1, so the easiest way to fix any problems that show up is to change the capitalization in the links.

5. Validate your code.

   Be sure you have all “green circles” in Firefox for both your site and blog home pages. Then have Dreamweaver do a link check on your whole site, and use the “Put” icon to copy your site to the remote server (actually, C:\htdocs on the computer you are working on). View the web site’s home page using your computer’s host name in the URL (not “localhost”), and click on the XHTML link at the bottom of the page to be sure the W3C Validator gives it a big green “congratuations” bar. Repeat this check for the blog’s index page too.

   Now do the same for the CSS links at the bottom of each page.

Because I will check your assignment by copying it from Maple to Babbage, all you have to do to submit the assignment is to send me an email saying you have finished it. Send your email to me by midnight on the due date (October 2). My email address is:

The Subject Line of your email must say CS-081 Assignment 3, exactly like that, in order to avoid my spam filters.

Be sure to sign your email so I know who sent it!