Lesson Practice 6-1: Styling Images

Task 1 - Controlling Image Dimensions and Border

1. Right click on each of the three images at the right and save them into your images folder of your HTML Practice site.
   
   
2. Open a nocss.htm in Notepad++.  Immediately Save the file in your CSS folder as image1.htm.
   
   
3. In the title element, add the title: Controlling Image Dimensions and Border
   
   
4. Add h2 header to the top of the page with the same text as in the title.
   
   
5. Add the image flower1.jpg at the beginning of the first paragraph.
   
   
6. Add the image flower2.jpg at the beginning of the second paragraph.
   
   
7. Add a new paragraph on a new line after the last paragaph. Add the image button_home.jpg to the paragraph, followed by the text: Click here to go to the home page.
   
   
8. Link the picture and text together to your index page.
   
   
9. Preview the page to make sure the images are displaying properly and the link works.
   
   
10. Add an embedded style sheet.
    
    
11. Create a .center class that centers text.
    
    
12. Create a class named .pic1 and add declarations to make the height 100 px and the width 140 px.
    
    
13. Create a class named .pic2 and add a declaration(s) to add a 3 pixels wide border with ridge style, and darkgreen color.
    
    
14. Create a class named .button and add a declaration to remove the border.
    
    
15. Apply the center class to the h2 element and to the last paragraph, containing the link image.
    
    
16. Apply the pic1 class to the first image, the pic2 class to the second image and the button class to the third image.
    
    
17. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.
    
18. Save the file again.

Task 2 - Image Alignment and Text Wrapping

1. Open a image1.htm in Notepad++.  Immediately Save the file in your CSS folder as image2.htm.
   
   
2. In the title element, add the title: Image Alignment and Text Wrapping
   
   
3. Change the h2 header at the top of the page to the same text as in the title.
   
   
4. To the pic1 class add a declaration to make the object float to the left.
   
   
5. To the pic2 class add a declaration to make the object float to the right.
   
   
6. To the button class add a declaration to make the vertical alignment middle.
   
   
7. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.
   
   
8. Save the file again.

Task 3 - Using the Clear Property

1. Reopen image2.htm if needed in Notepad++.  Immediately Save the file in your CSS folder as image3.htm.
   
   
2. In the title element, add the title: Using the Clear Property
   
   
3. Change the title heading to match the title element.
   
   
4. Create a class named .nowrap and add a declaration to set the clear property to right.
   
   
5. Apply the nowrap class to the third h3.
   
   
6. Preview the file to see the effects. If any property does not work, trouble-shoot to fix it.
   
   
7. Save the file again.

Task 4 - Contolling Image Spacing

1. Open image3.htm in Notepad++.  Immediately Save the file in your CSS folder as image4.htm.
   
   
2. In the title element, add the title: Controlling Image Spacing
   
   
3. Change the title heading to match the title element.
   
   
4. To the pic1 class add declarations to make the margin 10 pixels on the right and bottom.
   
   
5. To the pic2 class add declarations to make the margin 10 pixels on the left and bottom.
   
   
6. To the button class, add 5 pixels of space on the right. (find out if padding or margin is correct to choose by trying both.)
   
   
7. Preview the file to see the effects. Trouble-shoot as needed.
   
   
8. Save the file again.

Task 5 - Adding Box Practice Links to Index Page

1. Open your external style sheet.
   
   
2. To the dt rule, add a declaration to make 10 pixes of padding on the left.
   
   
3. Create a rule for the td element that aligns the cell contents at the top of the cell.
   
   
4. Save the style sheet and close.
   
   
5. Open your index.htm file.
   
   
6. Preview to see that the terms are now spaced a bit to the right in the background image.
   
   
7. Add CSS Box Properties as a new term in the list.
   
   
8. Add the titles of all your box, and image files as definitions.
   
   
9. Link the titles to their appropriate files.
   
   
10. Add the table files to your table category.
    
    
11. Test your links, save the file and publish the new files (including the edited index page and the three new images).