CSS Project 1 - Stevenson High School · 8. Add CSS rules to redefine the tags body, div, p, and...

CSS Project #1 – Animal Photos Unit #3 - CSS Adlai E. Stevenson High School • Applied Arts Division • Technology Education Department • Graphic Media Program • 2/26/12 Name: ___________________________________ Directions: Download cssProject1.zip from the website. 1. Make a new HTML document in Dreamweaver. 2. Save is as cssProject1.html in the cssProject1 folder. 3. Title the page CSS Project #1 – Animal Photos. 4. Insert a div. Enter container as the id. 5. Replace the text “Content for id “container” Goes Here” with “ANIMAL PHOTOS”. 6. Insert all nine animal images in the div. Each should have alt text. 7. The HTML for the body of the page should look like this: 8. Add CSS rules to redefine the tags body, div, p, and img until your page looks like the example. Below is a list of the properties you will need to define for each tag. body margin-top background div margin-left margin-right width background-color border-radius p color text-align font-size font-family img border-radius margin Extension: Change the opacity of the images to .8. Add a rule that changes the opacity of the images to 1 on hover (when the mouse rolls over the image).

Upload
others
Category

Documents
view
4
download
0

Embed Size (px):

Transcript of CSS Project 1 - Stevenson High School · 8. Add CSS rules to redefine the tags body, div, p, and...

Page 1: CSS Project 1 - Stevenson High School · 8. Add CSS rules to redefine the tags body, div, p, and img until your page looks like the example. Below is a list of the properties you

CSS Project #1 – Animal Photos Unit #3 - CSS

Adlai E. Stevenson High School • Applied Arts Division • Technology Education Department • Graphic Media Program • 2/26/12

Name: ___________________________________ Directions: Download cssProject1.zip from the website.

1. Make a new HTML document in Dreamweaver. 2. Save is as cssProject1.html in the cssProject1 folder. 3. Title the page CSS Project #1 – Animal Photos. 4. Insert a div. Enter container as the id. 5. Replace the text “Content for id “container” Goes Here” with “ANIMAL PHOTOS”. 6. Insert all nine animal images in the div. Each should have alt text. 7. The HTML for the body of the page should look like this:

8. Add CSS rules to redefine the tags body, div, p, and img until your page looks like the example. Below is a list of the properties you will need to define for each tag. body

margin-top background

div margin-left margin-right width background-color border-radius p color text-align font-size font-family img border-radius margin Extension: Change the opacity of the images to .8. Add a rule that changes the opacity of the images to 1 on hover (when the mouse rolls over the image).