Subtitles of the Movie

Let's go ahead and create our first Style but before that I need to give you some overview of terms and some Syntax Rules for how to create your styles. CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. Style Sheet like I have open here consists of a list of individual styles which are called rules, each rule or rule set consists of one or more Selectors and a Declaration Block. A Declaration Block consists of a list of semi colon separated declarations in braces; each declaration itself consists of a property, a colon, a value and then a semi colon. So let me go over each of these terms in case their new to you. So I have a rule that defined within the curly brace, each rule is composed of a series of declarations. Here in between curly braces, these declarations are broken up into a property such as font family, a colon and then a value in this case the font family is Arial or Sans Serif and then it's followed by a Semi Colon. So here's another one, the color property, colon and then the value of the property. In that case it's the hexadecimal color value. Here's margin equals 0 pixels, padding 0 pixels going down here various rules. There's the H1 rule there with Font Family, Padding, text file Alignment is left. Now you'll notice that each of these rules starts off differently, this one has a dot body and that's just a body. These are referred to as Selectors in CSS Selectors are used to declare which elements a style applies to; it's kind of a match expression. Selectors may apply to all elements of a specific type or only those elements which match a certain attribute. Elements may be matched depending on how they are placed relative to each other in the mark up code or on how they are nested within the Document Object Model which is the platform and language Independent Standard Object Model for representing HTML or XML and related formats. Now there are three types of CSS Selectors or Selector Types as they are referred to in Dreamweaver, you can see these if you open up the CSS Window and choose from the upper right hand corner New. So if I want to create a New CSS Rule the first thing I must decide is the Selector Type, in Dreamweaver the first one is referred to as the class, this is also referred to as Custom CSS Style. This creates the customized style with the set attributes, these class styles can be applied to any tag. I'll be reviewing this type of Selector first, I think their easiest to learn. Then you have HTML Tag styles referred to as Tag here in the New CSS Rules Dialog in Dreamweaver. These HTML Tag Styles redefine the formatting for particular tags such as H1. All text formatted with the H1 tag would then be immediately updated. So for example I have a H1 Tag here in my CSS File, whenever that tag is used in a document that uses this style sheet it'll be formatted according to these declarations here, this Declaration Block. The third type of Selector is the Advanced CSS Selector Style here in Dreamweaver notice that, that's referred to as Advanced and then ID Pseudo Class Selectors. So there's a variety of Advanced Selector Types. These can redefine the formatting for a particular combination of tags, for example TDH2 would apply whenever an H2 header appears inside of a table cell. You also have Pseudo Class Styles; most popular example of these would be the A Link and A Hover and A Visited. I have an example of that right here in this particular style, A Link. These Pseudo Classes can be used to define further behavior. For example the A Hover applies a style only when the user points to the visible element, usually by holding the mouse cursor over it. So in this example here the A Hover, the color of the text would change to that hexadecimal value. The Pseudo Class Selects entire elements such as A Link or A Visited, where as a Pseudo element makes a selection that may consist of particular elements such as colon, first line or colon first letter which would affect the properties of just the first line or first letter of a paragraph. Now notice that these CSS Rule Documents are simply collections of text, so you can create these very easily by hand in a text editor as long as you follow the syntax and structural rules that I've outlined here in this movie. But it's a lot easier to let Dreamweaver create these for you, so you don't have to worry about the structure and the syntax. So let me now move onto the next movie and show you how you would do this with the CSS Window. Simply choose in the upper right hand corner that dropdown menu there by clicking on it New, that'll bring up this New CSS Rule Dialog and by choosing the options here you can have Dreamweaver create these text files for you. So let me now move onto the next movie and show you how to create your first style using the New CSS Rule Dialog Box here in Dreamweaver.