image-left.Ĭhoose the radio button next to Define in and select the name of an external style sheet from the drop-down list. In the New CSS Rule dialog, select the Class radio button and enter a name in the Name field. Next, you’ll want to create a style to align your images to the left. When you apply the style, the image is immediately aligned to the right and 10 pixels of margin space are added to the left and the bottom. In this example, I’m selecting the style I just created called. To apply the new style, click to select the image you want to align, and then use the Class drop-down list in the Property inspector at the bottom of the page to choose the new style name.
Of course, you should set the amount of margin that works best for your design. I also like to include 10 pixels of margin on the bottom. When I align an image to right, I generally like to include 10 pixels of margin on the left, to create a margin between the image and the text that will wrap around the image when it is aligned right. First make sure the Same for All check box is not checked. Click on the drop-down arrow next to Float and select Right.
In the CSS Rule Definition dialog, choose the Box category from the left side. In the Save Style Sheet File dialog, enter a name for the external style sheet, and click OK to continue. To create a new external style sheet as you create a new style, choose the radio button next to Define in and click OK. The advantage is that you can attach the same external style sheet to any page in your web site, a more efficient option than recreating styles for every page, and an easy way to make global updates later. If you choose Define in, you can save your style in an external style sheet. If you choose the radio button next to This document only, your style will be saved in the head area of your HTML file. If you don’t type one yourself, Dreamweaver will automatically add a period to the beginning of the style name when you create a class style. Note that all class styles must begin with a period.
Class styles are ideal for image styles like this because they can be used as many times as you want on each page and can be applied to images and other elements.Įnter a name for your style in the Name field. In the New CSS Rule dialog, select the Class radio button. Next, you’ll want to create a new style for your images. Select the image you want to insert and click OK. You can choose Insert>Image or click on the image icon in the Common insert bar at the top of the screen. Insert images into your page using Dreamweaver’s standard insert image features. Thank your designer stars that CSS has given us a little more design control on the Web. If you’re still using V space and H space, this tutorial is for you. I often include a little margin at the bottom as well, just to make sure that text and other elements don’t bump into the bottom of my pictures. I routinely create two image styles for every site I work on, one that aligns an image to the right, with a little margin space on the left, and another that aligns images to the left, with a little margin space on the right. If you’ve ever been frustrated by the limitations of V space and H space (that’s vertical and horizontal space for those unfamiliar with HTML), you’re going to love what CSS can do for your images.Īs you’ll learn in this tutorial, using CSS to create styles for your images instead enables you to quickly and easily align images to the right or left of a page, and add margin space exactly where you want it to create as much, or as little, space as you want between the image and any text or other elements around it.