Subtitles of the Movie

In this movie, I review the Class Selector. The Class Attribute is available on nearly every XHTML or HTML Tag, it's written as such. You attach it to a tag like I've done the paragraph tag here to create two different paragraphs, one that has a border and one that's colored in blue as defined here in my rule definition. Here in the CSS Rule Definition for the dot border in Class Selector, notice if I go to border I have a solid border all the way around, one pixel in thickness and likewise for my blue class its defined here for the color being blue. So notice that I've attached this to two different paragraphs, so in contrast to Base Selector I can style each paragraph differently using classes Class Selector notice is defined with a Dot before the class name .border.blue. It's important that you include this dot when naming Class Selectors and also set a Class Selector only on specific elements that have that class. You'll do this by placing the Type Selector before the period in the Class Selector without any spaces. You would do that by creating the style as such; notice that there is no space between the DIV Tag and the Class Bordered right there. In this case I'm creating a border that's 2 pixels, solid and red for that DIV Tag. You can also set the Class Selector so that it sets multiple styles to the same element or tag in a document. For example you might want to have certain sections of your text call out in different colors from the rest of the text in the document. You would assign your paragraphs with classes much as I've done here. This is a black paragraph and a red paragraph so what I would do is go ahead and define new styles. Let's call this .red, click OK and notice that I need to select Class as the Selector Type first, so I avoid that error, click OK. Let's go ahead and do this in this document only, so I'm embedding this style and now let's go ahead and change the definition there to red. Now all I need to do is attach this red style to this paragraph. You can do that by selecting the Paragraph Tag here in Dreamweaver and then right clicking or control clicking if you're on the Mac and then choose Apply in the dropdown menu. Talk a lot more about applying styles a little bit later in the course but notice that now I have a separate paragraph down below. It's styled with the red style definition right there. Likewise, each Style Definition can contain a number of rules. For example let's go back to my Blue Rule and let's set the font and the size and the weight, click OK and if we look at the results in CSS File that Dreamweaver has created for us, notice that here in the Blue Definition I have all of those rules defined there. In my bordered I've got quite a number of rule definitions there. Border Top, Border Right, Bottom Left and so on. I'll be reviewing in much more detail more about setting up and using classes in Dreamweaver. But let me move on now to the next movie and contrast the use of classes to style your documents with the use of ID Selectors. The ID Selector allows you to give a name to a specific style without associating it with a tag or HTML element. So more details will follow in the next movie.