Lesson Ten: Floating Images

  1. Copy the gorilla to your images folder:


  2. Enter this code above the h1 tags (in your html file) to add two gorillas to your page:
    <img src="images/gorilla99.jpg" alt="Gorilla">
    <img src="images/gorilla99.jpg" alt="Gorilla">

    Your page should now look like this (notice that the body border has expanded to enclose the gorillas and the title: Sample

  3. Now you will use the float command to move the gorillas to the left and right of the title. Make these two classes in your CSS file:
    floatimgright { float: right; }
    .floatimgleft { float: left; }
  4. Call the classes in your html file by adding this code within your img tags:
    <img class="floatimgright" src="images/gorilla99.jpg" alt="Gorilla">
    <img class="floatimgleft" src="images/gorilla99.jpg" alt="Gorilla">

    Your page should now look like this: Sample

  5. To add some design add these properties to the elements and classes in your CSS file. Check your Webpage each time you add a property so that you will understand how the property affects the page: To the body element add:
    font-size: large; background-color: lightgreen; }

    To the floatimgright and floatimgleft classes add:
    margin: 10px; border: solid 5px darkgreen; }

    To the h1 element add these properties:
    h1 { font-size: 300%; background-color: darkgreen; color: lightgreen; text-align: center; }

    Your page should now look like this: Sample

Lesson Eleven: Containers, Rows, and Cells