Lab - Week 5 - Three Stacked DIVs

[ This lab is for practice. It will not be graded. ]

Lab Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict DOCTYPE.
• Validate your work using an HTML validator (see Resources page)
• Put any images into a folder called images.
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact me.
• Be sure to test your work. We will be testing your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).

Specifics

This lab will give you practice working with the box model properties, and a chance to experiment with the effects of negative margins. Follow these specifics to create Lab 5 - Three Stacked DIVs.

• If you have not already done so, create a new directory called week_5 and put all of your week 5 assignments in it.
• Create a new XHTML document called lab5_stacked.html using the XHTML template. Be sure to use the Strict DOCTYPE.
• Link to an external style sheet named lab5_stacked.css.
• Create four DIVs. Give each one an ID: content, Div1, Div2, Div3.
• Nest the three numbered DIVs inside the content DIV, but not inside each other. They should line up in the normal flow of the document, one after the other.
• Create a paragraph inside each of the three numbered DIVs. Type the following text in capital letters:
  • Div1 paragraph: XXXXXXXX
  • Div2 paragraph: YYYYYYYY
  • Div3 paragraph: ZZZZZZZZ
• Style the document according to the properties below.
  
  

  Properties	Specifics
  (all elements) all margins all padding	zero
  body text color background color	black white
  [all paragraphs that are grandchildren of the "content" DIV]* text font size font family	center align 2.5em harrington, times, zapf chancery, apple chancery, impact, sans-serif
  content text color background color width margins left/right padding top/bottom	black #EEE 600 pixels center on screen 50 pixels
  Div1 text color background border height	black #BCCBDC; 2 pixels #354B64 50 pixels
  Div2 text color background border margins height	black #E1EDF3 2 pixels #4387D2 negative 20 pixels 50 pixels
  Div3 text color background border height	black #B3D2E0 2 pixel #267073 50 pixels

  
  
  *See the Week 3 | Advanced Selectors | The Universal Selector lecture page if you're uncertain about how to form this kind of contextual selector.
• Your finished document should look a bit unusual; see image below. Write observation comments at the top of the CSS file.
• If you have Internet Explorer 6 or before, look at the document in that browser.
• Save, test, and validate the documents.
• Upload the finished files to your web space.
• Create links to both lab5_stacked.html and lab5_stacked.css from your Home page.