Insert and Style an Image in Expression Web

Back to the tutorials page

Drag a div into your page.

Click inside the div.  Go to the toolbar and under Insert --> Picture --> From File
 insert image

Browse to your image and click on it.  This will insert your photo inside the div.

Expression Web has default styles already applied to the style img when you import it.  Those need to be removed in order for your new styling to be effective.

In the Apply Styles or Manage Styles Task Pane click on new style.  We are going to use the contextual selector img in the Selector dropdown box. 
img

In the category Border, under width put 0 (zero)px.  In the category Box under both padding and margin put 0px

This zeros out all the image default styling that Expression Web applies.

If you want all your images to have the same style, you can style the img style and you are done.  This is what we will do first.  We have zeroed everything now we are going to add some styles back to it.  If you already closed the window, right click on img and pick Modify Style.  This will bring img back.

We are adding a solid border of 4px with a color of maroon.  Go to the Border category and in the dropdowns pick the width, style and color.  As you can see from my images above, the style has been applied.  I want the text to flow around the next image img

In order for that to happen we need to name the img (mine will be #example-1) name your img something appropriate.

Click on new style.  Name it  img#example-1  In the category Layout, pick float: left.This will float the image to the left and the text will flow up the side of the image to the top. 

imgI also need some space beside the picture  so the text is not on top of it.  So in the category Box add 10px to the margin: right box only.  (Unclick the checkmark.)  Click OK.  Thats all there is to it!

Trademark Disclaimer - Expression Web is the Trademark of and the property of Microsoft Corporation. Microsoft is not affiliated with Certain Web Design or this website, nor is Certain Web Design sponsored by Microsoft Corp.

©2009-2010 Certain Web Design, All Rights Reserved.