Modify your index.xhtml file so it has the following structure:
As demonstrated in class, you have to surround each paragraph generated by lipsum.com with p tags.
Also, it is better to reformat the text in the paragraphs so they fit in your editing window without having to scroll sideways, but this is not a strict requirement for the assignment.
Make the contents of the h2 either “Introduction” or something more creative.
Fill the paragraphs with more Lorem Ipsum text, and make the contents of the h2 either “First Topic” or something more creative. Make the contents of the h3 “First Subtopic” or something more creative. Note that if you choose to be creative, there should be a logical relationship between the contents of the various levels of headings.
Save your index page and be sure it displays correctly and passes XHTML validation with no warnings or errors when you click on the XHTML link at the bottom of the page.
If you have not done so already, create a directory named css in your My Website directory. Make the directory name lower-case to avoid problems and confusion later on. You can do this in Dreamweaver by right-clicking on the top folder in your site and selecting “New Folder,” and then renaming the folder as “css” as described in the Dreamweaver Setup page.
Right click on the css directory, and select “New File.” Rename the file “assignment_03.css,” and open it for editing in Dreamweaver. Delete all code from the file that Dreamweaver might have put there, and add the following css rule:
Save your stylesheet.
Now add a link to the stylesheet to the head of your index.xhtml page. (Put it right after the title.)
Be sure you use exactly the same spelling and capitalization for “css” and “assignment_03.css” in the link as you used when created the directory and file.
Save your web page, and view it using Firefox; verify that it comes up with white text on a black background. If not, you have to figure out what is wrong and fix the problem before proceeding.
Click on the menu and edit your site: verify that “Case-sensitive links” is checked. (Or turn it on now if is not already checked.) Now right-click on the top line of your site in the left-hand panel, and select “Check Links” from the drop-down menu. It doesn’t matter whether you specify the entire site or just the selected files because you have selected the entire site anyway.
A Report panel will open up at the bottom of the editing pane telling you if there are any broken links. If there are any, fix them before proceeding. The idea is to avoid any problems when I copy your site from Windows (case-preserving) to Macintosh on babbage (case-sensitive) for grading.
In the previous step you used a comma-separated list of tag names as the selector for a rule. In this step, you are to add three rules that use the DOM Tree selection operators
If you separate two parts of a selector with a space (no comma), you will select all instances of the second part that are descendents of the first part. To do this (and the next) step, modify your index page as follows: add a span tag around one of the words in the h1 element’s content and another span tag around one of the Latin words in the first paragraph of the Introduction.
Use the selector, body span to select all the span elements that are descendents of the body element. For the property list, make the color property blue. For the rest of the assignment, you should be able to figure out how to translate sentences like the previous two into a CSS rule. But to get you started, here is what your assignment_03.css should look like at this point:
Save the stylesheet, reload the web page, and verify that both the words you put spans around are now displayed in blue.
Now add a rule that selects all spans that are children of paragraph (p) elements, and make their background-color value gray. Save the stylesheet, reload the page, and verify that the span inside the paragraph, but not the one inside the heading, now has a gray background.
Modify this same rule to to select spans that are children of paragraphs and spans that are children of body elements. (p>span, body>span) Save the stylesheet and reload the page: verify that nothing changes. The span in the heading is a descendent of the body element, but it is not a child of the body, so it is not selected to get a gray background. The span inside the paragraph continues to be selected for the gray background treatment, though.
This experiment makes the point that you can easily make selectors that do not select anything, and there will be no error messages to warn you. If you click on the CSS link at the bottom of the page, you should see no errors or warnings: as long as the syntax is right, it is all right with the Internet if you make up CSS rules that don’t do anything. The only problem would be if you put in a rule because you thought it would do something and it had no effect. Then you have to do some detective work to figure out what you did wrong.
Add a rule to your stylesheet that uses the + operator to select paragraphs that are the next sibling of h2 elements. Make those paragraphs have yellow text on a green background.
Save your stylesheet, reload the web page, and verify that the first paragraph after each level-2 heading now has yellow text on a green background. (We will learn to use more subtle colors later in the course.)
The word in the first paragraph that had the blue text and gray background still has those two properties. The W3C CSS Specification says nothing about this case (that I can find), but all browsers tested seem to agree that the page should be rendered (drawn) this way. I infer that the browsers work their way down the DOM tree and use gray background because the span is lower in the tree than the paragraph that contains it. It is not a good idea to rely on something like this that is not explicitly and clearly stated in the W3C specifications; this is a case where a class attribute should be used with the span (see below.)
Add the important class to the first two paragraphs of the introduction. (<p class="important">)
Now add a CSS rule that makes everything of class important display in italics. (font-style:italic;)
Verify that the two paragraphs are displayed as expected and that the page is still valid XHTML and CSS.
How could you have accomplished the same thing without using a class?
Add an id attribute with the value target to the second paragraph.
Add a CSS rule that makes the element with the target id boldface. (The property name is font-weight, and the value to use is “bold”.)
Verify your work.
Make the div have black text on a white background. Use what you think is the “best” technique you have learned in this assignment to implement this feature. When you submit the assignment, include a sentence telling me which technique you chose and why.
Optional: Instead of using black on white for the text, use the “color picker” that pops up when you type in the color and background-color property names to select two other colors than black and white. Make sure the two colors contrast with each other enough so the text is clearly legible.
Once you have set up your web site and tested that both the XHTML and CSS links at the bottom of the page give you no warnings and no errors, log out of your account so your site will be copied to the server. I will copy your site from the server to the computer in my office (babbage) to check it out.
Remember: even if your site validates perfectly, you still have to make sure that all the CSS rules actually work as you intended. Testing your web page and fixing any unexpected appearances is a critical component of all the assignments for this course.
When you finish your assignment, send me an email message telling me that it is ready. Use CS-081 Assignment 3 as the subject line. Make it look just like that to avoid my spam filters. Send the email to: vickeryatbabbage.cs.qc.cuny.edu.