Put your cursor at the end of that sentence and let's add a Return, and let's insert an image. You can select any image you want out of this site for this purpose, but I am going to choose something from the cards section, images, how about, arctic. This painting is called Arctic Dreams. So for my Alternate text I am going use the name of the painting, Robin is a spectacular artist, and I do appreciate her graciously letting me use this site in this series.

Now, you can create styles in CSS to format text, but you can also create styles to format images and other elements. So for example, if I wanted to create a border around this image that was a particular color, I could create a style that would allow me to do so. There are number of ways I could do that, but for now let's use this as a chance to create a new style. Again, clicking on that little icon at the bottom of the CSS Panel, the one that's got the plus sign on top of it. This time I am going to create a Class style, because a Class style can be applied to any element on the page. So if I want to apply this to an image, I will be able to do so.

Now, Class styles always start with a period or a dot; don't ask me why, but as we go along I will point out that some styles start with a period, some start with a pound sign, and some don't start with any special character. As you get used to that you will realize that helps you to distinguish between the different kinds of styles. So for now just trust me, Class styles start with a period.

You can call styles anything you want as long as you don't use spaces or special characters, although you can use hyphens and underscores. So I am going to call this .image-border. When I click OK, I will come to the same CSS Style Rule definition. No matter what type of selector you choose as you create your style, you will always come to the same CSS Rule definition dialog.

Now, I said I wanted to create a border around this image, so you might guess that there is a category called border, and that's probably where I want to make these settings. So if I want a border here, I can choose to have a dotted, dashed, or let's just make a solid border.

Notice that throughout this dialog you will find little boxes like this that enable you to specify the same option for all four settings at the same time. Leaving all of those set as Same for all, now I will choose a thin border, and let's just make it black.

When I click OK, nothing changes, because Class styles don't actually make any difference until they are applied to the element. So Dreamweaver and a browser at this point would have no way of knowing that I wanted my image border style to create an images around this image. I have to apply that style to this image.

So simply click to select the image, and now notice in the Properties dialog at the bottom of the screen, you have a Style option. If I click here, any available styles will appear on this list. I just created image-border, so its sitting here waiting for me. When I click to select it, you see my border appears around the image.

Now let's add a little more text to this page. Let's highlight this and let's format it to match the headline. Now, your commonsense might say, look, I have got two styles over here; I have got an h1 style, I have got an image-border style, so I should go to my Styles Menu, and wait a minute, there is no h1 style here, there is just my image-border style. Well, that's because image-border is a Class style and all you are ever really going to see here are Class styles. h1 is already an option in Dreamweaver, its an existing tag.

So to apply the h1 tag with the new styling, I just apply the h1 tag like I always would. Choose from here, h1, and notice, when Dreamweaver styles it, it follows my new style definition for h1. You could of course now make this an h2 or an h3 and then define a different style for the h2. Later in this series you will see how you can actually create more specific styles so that you can use the h1 tag to format multiple selections of text on your page and still have your headlines look different in different sections. But I don't want to get too advanced at this point. The goal here is to get you started down the path towards CSS, that you can use CSS to format text, to change the display of an image, and as you will see soon, you can use CSS to position elements on a page as well.

If you want to change a style after you have created and applied it, you can use the CSS Styles Panel. So for example, if I select my image-border style, and let's say I want to change the color of the border, I can double click on it, come back to the Border category, and this time let's select, I don't know, maybe red, just so you will see the effect. Again, I can click Apply and see that instantly. When I click OK, Dreamweaver will save that new style, and anytime I apply that style now, it will have a red border instead of a black one.

The other thing to keep in mind is there are still settings specific to the HTML tag. So if I click to select this image, you will see the properties for the image up here. You can set any properties like the Border color here, the same way you can set them up here, but you are always going to be better off these days by creating CSS styles.

By the way, while we are here, I see a little typo, let me make this Arctic Dreams. That's another nice thing to keep track of, it's so easy with Alt text, when you are just typing that in quickly as you insert an image, to make a mistake like that. So as you are double checking other elements of your image, always double check your Alt text as well.