Subtitles of the Movie

Continuing from the previous movie, demonstrating how to create your first External Style Sheet. Now I've gone ahead and saved the External Style File, now I get to work back on my Body Rule there, so let's go ahead and set up some properties here. Arial size 12, style normal, click OK and then notice that here in the CSS Window I have my sample2.CSS and then my Sample Style I created from earlier but then notice there's no style attached to it. So now I have two external style documents that are attached to this one file. This is perfectly legal to do but I don't recommend it when you're starting out as I would recommend starting out with just one external style document. I remember that when I did my very first Dreamweaver site I had like 6 or 7 External Style Sheets and it was rather confusing to keep track of which was which and it doesn't hurt you to have a lot of style definitions within these style sheets. So I'm going to go ahead and Delete that extra external or unlink in this case, there's a Delete Icon there but you're not actually deleting the file, you're just simply unlinking it from this particular file here and to show this to you if I go and open my work files folder notice that there are my two HTML Files that I've created and saved in this folder, external style and inline styles and there's my style sheet and that's the relationship you want, is you want these together. If you break the link between the style sheet, the external style sheet and the document all the formatting will be lost and you'll be very unpleasantly surprised. Let's go ahead and move this out of the way, now once we have our external style sheet defined and attached to our document, now it's very easy to add new CSS Rules to that. Let's go ahead and add our Heading 1 Class, notice that I'm going to define this here in the linked external style sheet, Sample2.CSS, click OK. This time I get right to the CSS Rule Definition where I can define the properties of the style and I can continue to add, notice that it gets added here underneath and indented from the name of the Link Style Sheet. Keep clicking on New and adding either classes, tags or advanced IDs. Let's go ahead and add now the a H2 redefinition of the H2 Tag, again I'm going to define it in the Sample2.CSS, set up my definitions here. Let's go ahead and change the color, that's always a good one to do and that way you can tell when that styles been applied but there are my 3 definitions, style definitions in that style sheet. Notice that automatically Dreamweaver opens up that Sample2.CSS file; here you can see it in the text format as I showed you previously. So that format there is a equivalent to this CSS Dialog right here, in fact if you click on the Show List View Option at the bottom, right there at the bottom of the window, this will often display it in the same order as you have it here in the text file. In this case there's no difference between Category View and List View. The last button there is Show Only Set Properties; if you click on the Current Tab here you'll get a more detailed list of the properties of that particular style. You can also notice Change those Properties right here. So all of these Views are equivalent, you probably want to work with all of them in difference circumstances. Sometimes it's easier just to open up the text file here in Dreamweaver and make changes, other times it's easier to use the CSS Window and the current Tab View there to make your changes. So there you have a demonstration of how to create your first external style sheet in Dreamweaver.