CSS Exercise 2

Start a new HTML file on your desktop called "css2.htm". This should be a basic HTML file with head and body sections.

Using CSS in the head of the file (i.e., an internal style sheet; see Castro for help), complete the following:

1. Give the body a #A06800 background color
2. Make a div 770px wide and 600 high div with a gold background
3. Center this div on the page using the centering method from last week
4. Inside the first div center a second div using the same method
5. The second div should be 560px wide, 440px high, and have a red background
6. View the page in Mozilla/Firefox and in IE; the divs should center in both browsers
7. When you have finished, copy "css2.htm" to your "drafts" folder on Eden

return to schedule

 

CSS Exercise 3

In this exercise you'll use different classes in CSS to customize paragraph styling.

1. On your desktop save "css2.htm" as "css3.htm"
2. In your style sheet,remove the height properties from the two div rules so that each div still has a fixed width but no longer a fixed height
3. Inside the second (inner) div cut and paste enough text for four short paragraphs
4. Divide this text into four paragraphs using <p> tags
5. Divide the four paragraphs into two alternating classes
6. Adding CSS rules to the internal style sheet in the head of the file, use color, font-size, family, padding, etc, to make these two classes clash/contrast as much as possible
7. View the page in Mozilla/Firefox
8. When you have finished, copy "css3.htm" to your "drafts" folder on Eden
9. Post links to "css2.htm" and "css3.htm" in the "CSS Exercises 2 and 3" thread on the Class Forum

back to top

 

return to schedule

 

 

~Jonathan Bass