Subtitles of the Movie

In the previous movie, I reviewed the various syntax instructional rules for creating your own rules and combining those rules into a style sheet document which is simply a collection of text, easy to create these in a text editor like Simple text file or Notepad. But it's even easier to use Dreamweaver to create these rules, so let me demonstrate how to create your first CSS Styles here in Dreamweaver. Which you'll want to do is open up the document that you want to apply these styles to, let's say this one here and then choose Window, CSS Styles to open up the Styles Dialog. In the upper right hand corner choose New and that'll bring up the New CSS Rule. So let's start off with the Class Selector, I think this is the easiest one to do and what you'll want to do to make sure that Dreamweaver applies the right syntax is that these class names must begin with a period or a dot. Let's go ahead and call our first style .test to make sure that class is selected. Now I can define these in an existing style sheet an external style sheet or I can define it in this document only, I'll be reviewing in more detail the difference between inline styles which is what I'm creating here when I choose this document only or creating an external style sheet which will be the option here. Define in either an existing style or a new style sheet file. Let's go ahead and create a inline style for this document only, click OK and now Dreamweaver will create the syntax for me using this CSS Rule Definition Dialog Box for my class here Test. Notice that I have a series of categories to the left and types to the right. I'll be going through each of the various categories and parameters or properties that you can set for that category in detail a little bit later. But let's go ahead and set up our first style by choosing a font from the dropdown list, size 14. Let's choose a weight, so you can see that I'm just choosing options from dropdown menus rather then adding all the syntax and making my own declarations as I demonstrated in the previous movie. So let's go ahead and set Arial, Helvetica, Sans Serif as the font, size 14, bold weight, Oblique style, click OK and Dreamweaver will add that automatically for me here in the Style Category of my CSS Styles Window. Notice that I have style 3, style 4 and there's my Test style. I can go back and modify any of the styles that I've previously defined for that class by choosing the category then going over here to type and modifying all of my settings. If we look at the HTML here by choosing my Split View, at the top of the HTML here, notice that I have in red my test defined here, embedded in the document itself. There is my Syntax that I covered in the previous movie, there's my declarations, font family, again separated by these braces. But there's my font family, colon, Arial, Helvetica, Sans Serif, font weight, font style, text decoration, underlined, font weight, bold. So you can see very clearly that the HTML its been generated here, embedded in the document is identical to the decisions that I've made here in the CSS Rule Definition Dialog Box. I could continue adding to the list of embedded styles here by selecting new from the contextual menu. Let's do now a tag redefine, let's choose the tag from the dropdown menu, let's choose H2 for example. I'm going to define this again in this document only, this is what again defines this as an embedded style. Now let's go ahead and set up my Rule Definitions, let's choose the font for the H2 Tag, it's going to be Georgia, the size will be 24, weight will be bold. Let's choose a color, this is probably the best way to really learn these is to set up some styles, apply them to text but use different color definitions, so you can see which style is being applied. Let's go ahead and click OK and there's my new H2 style definition. Notice the name does not begin with a Dot there indicating that, that is a HTML tag style in contrast to a Custom CSS or class style. The last type of selector, the Advanced CSS Selector an example of that can be seen here in my Style Sheet. Those are terms that begin with a Pound Sign here, right here, for example Masthead, Headlines, Site Names. So I'll be reviewing each of the three types of Selectors in greater detail later and here you have a demonstration of how to create your style definitions, also referred to as rules in the CSS Documentation. You can add these by hand, again using the syntax that I covered previously or by using the window CSS styles and then open up the contextual menu, choose New, choose your Rule, let's do one .Header2, choose your Selector, click OK and then set your properties here using the CSS Rule Definition Dialog Box.