So let's go back to Design View, so we can take a better look at what we have done here. Now remember we can't preview this page because it's a master page, but we will be able to see for sure how it looks in a browser as soon as we create a page from it. I want to create just a few more styles, so that we have them as we build out the pages.

One of the styles I want to create is a body style to redefine all of the text on our page. So let's come up New Style and notice Expression Web finishes body for me because it knows I am just redefining the body tag. This is where you can define elements that will affect everything in the display area of your page. So I want to set the font to Arial, so that everything in the main body of the page will be Arial, unless I have specified that it be something else.

This is where you start to see how the priority of styles affect display. So when I click OK, I have now set the text on this page to Arial, but notice it didn't change any of my navigation elements. That's because those have their own style defining them as Garamond, but if I just type something here into this content div, you see that's how that Helvetica. Any other text that I add to this page, that's not defined more closely by another style, will be displayed in Arial. So that's the master font style for the page because it's in the body tag.

We just delete that out of the way. Finally, I am going to create two styles for image alignment, that will come in handy as we are working with the images for our Listings and our Agents. Again, New Style, these will be class styles. These are styles I use in almost every side I create, image-left and image-right. They work like this. In Layout, you want to set the float to left. So I want to float my left aligned images to the left.

Here is the trick to the image style. In Box, I want to add some margin settings, but I want to set them only on one side and on the bottom of my image. So I am creating a style that when an image is aligned to the left, we will have a little margin space on the right and a little margin space on the bottom, just to keep any text from bumping up against it. So I will set right to 10 and bottom to 10, but I won't set a left margin, because I would want an image to line up with the text on the left side of the page.

You will see how these work when they are applied. Click OK and now one last style. I promise this is the last style we will be creating. I am going to right-click on image-left, use that New Copy Style trick to make this image right. Now I want to change the float to right, the Box I want to change the padding. So instead of having a little extra padding on the right, I want a little extra padding on the left. So I can just delete the 10 there, add the 10 there and click OK.

Now I have a master page with a collection of styles that will work on all of the pages I am going to create in this site.