In this lesson, you will learn the role that the CSS designer plays when working with cascading style sheets in Adobe Dreamweaver. I have created a site over here in my files from my module 2. You can go to the site menu and create a new site and navigate out to the lesson files folder from the module 2 folder. I'm going to open up the index dot html document. Now when we create in Dreamweaver, a lot of times we are creating the structure of our page using our html code. But in order to design the page, we actually use cascading style sheets, similar to how using design view allows us to lay out pages without seeing the code. CSS designer allows us to create those styles without seeing the code. So I'm going to go over here to the CSS designer. It's tucked in right behind the files panel. And to really work well with the CSS designer, what I'm going to do is expand this out a little bit. And what happens when we do that is that we get two columns of information. So this shows us a little bit more about what's going on in the document. Now up at the top, we have two tabs. We have current and we have all. I want you to make sure you have the all button checked because what that does is that shows us all of the cascading styles that are in this document right here at the top in the first column. It gives us our sources. So it's letting us know that we are getting cascading style sheets from two sources. The first source is our multi column template dot CSS page. And the second, we do have some styles defined as internal styles in the style tag. The next area down has to do with our media queries. And we're going to learn more about CSS designer and media queries in a later module. The third section is the selector section. So this is where we actually choose the objects that we are going to define. And then over here on the right, this is where our properties will show up when we are working with our individual selectors. If I click on the sources up here at the top and click on the multi column template, when we go down to the selectors, we can see there's quite a few in this list. If we click on the style tag, we can see that there's only one in that area. And if we click on that columns P over here on the right, this is where we have all of the properties that can be applied to this selector. Now up at the top, we have our layout information. We have our text information. We have borders and we have backgrounds. So we can click on any one of these icons, and it will take us to that group of properties. So if we click on the text icon, we can see some of the properties that we have available to us in the text category. And we can see that this has a color to the text. Now this columns P is actually down here in our bottom of our page down here right underneath all of our different areas, apparel, gears, apps and hiking. And we can see that the text color here is this green color. There are a lot of properties that are available to us when we are working with cascading style sheets. So sometimes it's easier just to show the set. So we're going to click on this check mark here. And what that does is it shows us only the properties that are applied to this selector. I'm going to uncheck that show set. And I'm going to go back up and put my cursor. I'm going to put it in the paragraph that is right below the featured high headline. And I can see that this has kind of a light gray color to it. And I really do want to change that. But trying to figure out, all right, it's not the columns P. So it has to be someplace in this multi column template area. But trying to figure out which one actually applies to this content is kind of difficult with all of these different options in here. So in that case, up at the top, we're just going to click on current. Because what that does is that gives us all of the styles that are applied to either the paragraph that we have our cursor in, or to the container, the left article container, or the outer container of the whole page. And so if we select that container left article P, and we go up to our show set, we can see that there is layout information applied to our paragraph, as well as text information. So I'm going to click on this set color, a little bit of a darker color. I have this darker gray color here, and I'm going to click off, and I can see the change that was made. When you hover over any of the properties that are available to you, you will notice that we have two icons that show up when you hover over. The first is the disable property option. It's the no symbol. And so if you want to see what something's going to look like without that property, you can click on that disable option. And you can see when we do that, our text goes to a darker color. That's the default color. When we click back off that, we enable that CSS property. If you need to delete a property, you can click on the trashcan icon just to the right of that. But before you delete anything, make sure to disable it and make sure it's not going to affect anything on your page. Keep in mind though, when we are working with external style sheets, it might not affect the page that you have selected, but it may affect other pages that this style sheet is applied to. So you do have to be a little bit careful with that. So in this lesson, you learned about the CSS designer and how it can help you when working with cascading style sheets attached to an HTML page in Adobe Dreamweaver.
