Objectives:

• Apply a Style Sheet to a web page
  
  
• Make text wrap around an image
  
  
• Apply the alt feature for better accessibility
  
  

Making Text Wrap Around a Picture with CSS

1. I placed this css code in the stylesheet (the .css file in your folder):

   
   
   .image{  float:left;
            margin-left:0;
            padding-right=1em;
            padding-top=1em;
            padding-bottom=1em;
            }
   

   Then, when I placed the picture in the page, I used this code in the actual web page:

   <p class="image"><img src="luck.jpg" alt = "my tom cat..."></p>
   

   
   
   This accomplishes two things. First, it applys my style to the actual picture. This is what makes the text "wrap" around the picture itself. Second, the use of the alt tag creates a situation whereby if the user hovers the mouse over the picture, the "alternative" text appears. This is a feature that specifically helps visually impaired users (or people using text only browsers) make sense of your images.

   Assignment

   Take a previous web page you have made in class and redesign it using CSS. Make sure your text wraps around your images (where appropriate) and that all of your images have alt tags.
   
   << Back to Skyline