Subtitles of the Movie

In the previous movie, I demonstrated how to set up a new CSS external style document and how to add style definitions to that document by using the new menu option from the CSS window. I showed you how to create classes. In my full Dreamweaver CS3 tutorial, I show you also how to add tags and advanced IDs and pseudo class selectors to your documents. Now, once you have a variety of styles defined and ready in your CSS external document, you're ready now to apply those to your pages, so in this movie I show you how to do this. I think it's easier to create styles than it is to apply them, so this will be a very important technique that I'll cover in this movie. You can apply these styles either from the CSS window or from the properties inspector. Most of my students find it easier to apply these from the properties inspector, so I'll use that method in this movie. Basically what you do is click in the paragraph or area or table or layer where you want to apply the style and then, from the style drop-down menu here in the property inspector, choose the style from the list. So notice that that paragraph there is styled in the body blue. This paragraph will be styled body red, simply by choosing it from the list. Now, what I recommend that you do is use the tag selector in combination with your style drop-down to apply these styles. Never highlight the text and then apply it from the style drop-down. Instead, click either in the paragraph where you want to apply the style or, better, even, use the tag selector down here. So let's go ahead and do that and apply a none style, which is another option to both of these paragraphs. Let's now use the tag selector down here. Let's click on the table selector. Notice that the entire table is selected. Now let's apply a style to that table. Notice that I can't apply it from the properties inspector, but I can apply it from the CSS styles window. The way you do that is you right click on the style that you want to apply from your list. Let's apply the body style to my table and choose the apply option. Notice that everything within the table has now had that style applied to it. Now let's use the tag selector and choose this table row right here and now, from the property inspector, notice that my styles are back. I can now choose body blue. Now everything within that row is in body blue. I also have a cell here, defined by the TD tag. Notice that again I select the TD tag and my cell is highlighted. From the drop-down, let's choose body red. So this is the best way I know of of learning. One of the more complex and challenging topics in Dreamweaver is how to apply the styles once you've set them up, so that's a very quick run-down of each of the steps that you'll need to master before you can consistently and reliably apply your styles to your Dreamweaver documents. Let me review each of the important steps again. Number one, you'll need to make sure that all of your content has been added to your page and that all resident formatting or inherent formatting has been removed. You'll notice when you click on some text and you don't see any formatting options here in the properties inspector. Next, set up your style document as an external document, not as an internal attached style. You'll know to do that when you go to your new menu option here in the CSS window and in the new CSS rule make sure you're defining these styles in an external document, not this document only. That will allow you to use the document on a variety of pages. Next, try to add as many styles as you can think of. It's easier to get a long list of styles and then start applying them to your documents, rather than forgetting some and having to go back and apply new styles before you're done applying the styles that you already have on the document. Lastly, be sure to use the tag selector here at the base of the documents window. To apply the styles, use the tag selector in conjunction with the style drop-down menu here in the properties inspector or the styles as they're defined here in the CSS window. Never apply styles by selecting text and then applying it either with the property inspector or the CSS window. The last thing you'll need to learn how to do is to attach your external style document to additional pages in your website. I have another page here, page 2. Notice that my styles window is empty. I have no styles to find. What you'll want to do is attach your external style document to this document. That's very easy to do. You can do it right here from the CSS window in the upper right hand corner. Choose attach style sheet. Browse to the location of the style sheet that you want to attach. In my case, it was the my_style_1. Click okay. Click okay to close the attach external style sheet dialog. Notice that all of the styles that I used in the previous document are all here. As you can see, it's very important that you save all of your files to your local root folder or Dreamweaver will not be able to find this external style document or, worse, it'll find it for this session, but in all future sessions this link will be broken, so all of your styling that you've carefully applied to the document will be missing. Now, you'll notice that you can attach more than one external style document. Notice that I've got two style documents defined within this site. I've got the 3 column left nav and the my_style_1, so let's go ahead and apply both of them. Notice that both of them are now attached to this document. The 3 column left nav CSS document is very large. It has a lot of styles in there. In general, I try to limit the number of external style sheets that I'm linking to for each document to avoid confusion. I find that it's better to have fewer external style documents and each document is more comprehensive in terms of the number of styles that it contains. Like this one right here contains about 100 styles there.