Assignment 3

This week we learn about divs and spans.

Tip:

CSS can get confusing if you're working with deeply nested HTML elements. One quick visualization of what you're actually looking at is to use something like "div { border: 2px solid red; }" to give every div element on the page a red border, and then refresh the HTML page (you want to remove the border after you found the bug, of course).

Preparation:

Text: Chapter 11 - Advanced Web Construction: divs and spans

Note: This is a huge chapter, so be prepared to spend a good amount of time in reading and doing the exercises. It's worth it though; your understanding of how CSS works will be vastly improved.

I also strongly suggest that you try to get ahead on the reading a bit and get a start on chapter 12 after you have finished assignment 3, because assignment 4 (chapter 12) is even more huge than this one.

CD: (optional): View lesson 3.

Note that in the video for the objective "css shorthand" the author states that the order of the values for the "background" and "border" properties matters. That's wrong. The order doesn't matter.

For Credit:

1. Use divs and spans and some new CSS techniques -- 40 pts.

   Develop an HTML page named a3.html and use a "link" element to link it to a stylesheet named a3.css. If you use your HTML code from last week for this week's assignment, be sure to rename the files a3.html and a3.css. If you prefer, you can develop new files and name them a3.html and a3.css. In addition to any other rules and properties that you want to include in your stylesheet, you must do the following:

   1. (4 pts) Use at least 2 div tags to divide your webpage into logical sections, and give each div an id.

   2. (8 pts) Create rules in your .css file for these ids. In addition to any other styles you may want to use, you must use the "width" property to specify the width of one div in pixels and the width of a second div as a percentage.
      
      
   3. (4 pts) In at least one div you must align the text to the center or right.
      
      
   4. (8 pts) Use descendant selectors (pp. 451 - 455) to create rules in your .css file that style at least 2 tags that occur inside your divs. You must apply a different style to these tags than to the other same tags on the page, without using additional classes or ids. For example, your selector might select all p elements that are inside the "elephants" div, or all blockquote elements that are inside the "cottoncandy" div. If you read and understand pp. 451 - 455 this should make sense.

   5. (4 pts) Use 2 span tags, and assign them to 2 different classes.

   6. (4 pts) Create style rules for each <span> class.

   7. (8 pts) Use pseudo-classes to modify the color of the text for various states of your links - link, visited, and hover. Make sure that you put the rules in the correct order in your CSS file. Note: to demonstrate that these rules work, you will need at least one link on your page. Make sure that it is a real live link. Broken links will be penalized.

   Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Links to these validators are on the Links page. Note that points will be deducted from your score for each error in your XHTML or CSS code.

   Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a subfolder.

2. Participate in the lesson 3 discussion - 5 pts.
   
   Post a message on the "Lesson 3 discussion" topic of our message board. Make sure you find the topic with this title that was authored by me. This could involve asking a question, answering another student's question, giving an example of something that you struggled with and then overcame (or didn't!), giving an example of something you found particularly cool, or any other constructive way you can think of to participate. In the "Name" field the first word MUST be your student server username; after that you can type your real name to make it more personal. Contributions of just a few words will not receive credit.
   
   Do not post any new topics on the message board. New topics that are created by students will be deleted.