Subtitles of the Movie

In the previous movie, I demonstrated how to create your first styles, these were called embedded styles because their embedded in the HTML of the document. For example here is a document with embedded styles, notice that these style declarations are located right here after the title tag, says style type, text, forward slash CSS and then I have my dot body which is a class and dot title with my declarations underneath. Remember the format of these declarations is you have your property, the colon and then the value followed by a semi colon. These are easy to set up and easy to use, the downside of using inline styles is that these style definitions are only available for content on this individual page and that negates one of the big advantages of CSS and that is allowing you to style and format your pages across a website so there's consistency and harmony with the styles that you apply. So to accomplish this objective you'll want to use external style sheets so in this movie let me demonstrate how to set up your first external style sheet in contrast to internal styles. Let's start by creating a New HTML file and let's go into Design View and open up the CSS Styles Window in here in the upper right hand corner as I've demonstrated previously, there is a new option for creating a new rule. Now it's a little bit confusing as you need to create your first rule, let's go ahead and create a body class here, put the period in the front and I want it here in the define in area, this is where you set up the difference between an inline style and an external style sheet define in this document only as what I did previously. This time I wanted to find in the new style sheet, now if I had an existing style document in this site definition that I've created for this page for example, there'd be another list of styles here but in this case this is a brand new document and I haven't set up a site with this document yet so we're just going to do new style sheet file, click OK. Now what's confusing, for it's going to ask you to save the location of the style document and not necessarily work on that style rule that I set up to begin with. That's very important here that you save this external style, let me call this sample underscore style, that you save this style document with a dot CSS extension and you save it in the same location as the original file or if you're working with Dreamweaver sites, you want to save it within that site. So let's click on save, I'm going to save this to the work files folder and Dreamweaver is going to warn me here that to make a document relative path your document should be saved first. So I did this to show you that you definitely want to save the document first, the temptation is usually to get forward and move forward with your styling and you'll forget to save that file first. So I'm going to cancel out of here and I'm going to take my untitled 2 and save it. I'm going to call this External Style to distinguish it with my inline styles file there, let's spell that correctly. External Style, save that, now that its saved it's now safe for me to go ahead and create my External Style Sheets. Let's go back and do the body a little bit tricky and you have to first work on one of the Selector Types here, a rule here and then notice that I have the sample style that CSS that was defined for me before. Let's go ahead and do a new style sheet, click OK and now notice that I have here in my work files, let's call this Sample 2 style or just sample 2 dot CSS and let's spell sample correctly here. So this is a very common mistake that my students will make, that you'll forget to really manage your files correctly. You want to make sure that this CSS file is in the same folder as all of your HTML files that you're working with in Dreamweaver. I conclude this demonstration about how to create your first external style sheet in Dreamweaver in the next movie.